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

Question

[已解决]检查我的答案

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

我认为在创建它时我不需要为商店识别一个组件..所以我现在傻了..

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

购物清单.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

进一步测试 购物清单一

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 函数作为第一个参数传递给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 2

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

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

Answer 3

发现问题...

import 语句似乎对连接起作用..

错误

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

正确

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

有人知道区别吗？我想知道那里有帖子回答吗？