React/Redux export default connect() 似乎没有连接到 Provider

Question

[已解决]检查我的答案

我正在通过 youtube 播放列表学习 MERN Stack https://www.youtube.com/watch?v=TO6akRGXhx8。当我到达 28:04 时，我卡住了，他忘记将他的组件与 'react-redux' 连接。我跟着他如何解决它但是好吧，由于某种原因我的似乎没有联系。没有道具传递到我的 ItemModal 组件。所以我花了 3 个小时进行调试，最后得出结论，我发现只有当 js 被命名为 ShippingList 时，connect() 才会起作用……当我将 ShippingList 重命名为另一个名称并更新引用时，它不再起作用了。 .. 请参考下面的一些片段

我认为我在创建商店时不需要识别商店的组件..所以我现在惊呆了..

想知道你们是否可以复制它，请找到我的 repo https://github.com/AmeDin/mern

ShoppingList.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class ShoppingList extends Component {


  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}



const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingList);

ShoppingListOne.js

import React, { Component } from 'react'
import { connect } from 'react-redux';

export class ShoppingListOne extends Component {


  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}



const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingListOne);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './reducers/index'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import * as serviceWorker from './serviceWorker';

const middleware = [thunk];

const store = createStore(rootReducer, 
    compose(
        applyMiddleware(thunk)
    )
);
ReactDOM.render(<Provider store={store}><App /></Provider>, 
document.getElementById('root'));

serviceWorker.unregister();

console.log的截图：https://i.stack.imgur.com/FPBBs.png

进一步测试 ShoppingListOne

const mapStateToProps = (state) => ({
    item: state.item
})

const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)

}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingListOne);

购物清单

const mapStateToProps = (state) => ({
    item: state.item
})


const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingList);

似乎没有为 ShoppingListOne 调用任何函数。 ShoppingList 有一个名为 line26 的函数，控制台的第 3 行。

https://i.stack.imgur.com/WxwRm.png

Answer 1

您必须将 mapStateToProps 和 mapDispatchToProps 传递给 connect，以便它可以创建一个可以访问 redux 存储的包装器。

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingList);
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingListOne);

Answer 2

您需要将 mapStateToProps 函数作为第一个参数传递给 connect 以使这些值可用于连接到 redux store 的组件 .不带任何参数的连接不做任何事情，除了使 dispatch 可用作连接组件的道具

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingListOne);

和

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingList);

此外，您还需要确保导入连接的组件，该组件 ShoppingListOne 导出为默认导出而不是命名导出

你的导入看起来像

import ShoppingListOne from './path/to/ShoppingListOne';

Answer 3

发现问题...

导入语句似乎对连接发挥了作用..

错误

import { ShoppingList } from './components/ShoppingList';
import { ItemModal } from './components/ItemModal';

正确

import ShoppingList from './components/ShoppingList';
import ItemModal from './components/ItemModal';

有人知道区别吗？我想知道有 post 回答吗？

React/Redux export default connect() 似乎没有连接到 Provider

React/Redux export default connect() doesn't seem to be connected to Provider

reactjs

react-redux

mern