reactjs - React/Redux 导出默认 connect() 似乎没有连接到 Provider

Question

[已解决] 检查我的答案

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

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

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

购物 list .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);

购物 list One.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);

索引.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 截图: /image/FPBBs.png

进一步测试
购物 list 一

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

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

}

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

购物 list

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


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

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

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

/image/WxwRm.png

Answer 1

您需要通过mapStateToProps函数作为 connect 的第一个参数为了使这些值可用于连接到 redux store 的组件
.不带任何参数的连接除了 make dispatch 什么都不做可用作连接组件的 Prop

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';