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

Posted 2023-02-16

【中文标题】React/Redux export default connect() 似乎没有连接到 Provider

【英文标题】：React/Redux export default connect() doesn't seem to be connected to Provider

【发布时间】：2019-08-12 06:10:35

【问题描述】：

[已解决]检查我的答案

我正在通过 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

【参考方案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';

【讨论】：

你好，我已经执行了这个测试，然后到达下面的行 export default connect()(ShoppingListOne);导出默认连接（）（购物清单）；进一步的测试行为。它们以相同的方式产生。我无法从 ShoppingListOne 中的商店提供者那里检索状态，但能够在 ShoppingList 中这样做

@AmeM 去掉export class ShoppingListOne extends Component 前面的export关键字，并将这个组件作为默认import导入

Kathri，问题出在导入组件上。我不知道导出类与没有“导出”的区别。无论有没有“导出”，如果我导入没有大括号“”的组件，它都会起作用。我正在阅读以了解更多信息并了解使用“”或不使用它进行导入，并找出“导出类”与“类”之间的区别。请赐教。 ***.com/questions/36795819/…

@AmeM，连接的组件作为默认导出返回，因此您需要将其作为默认导入导入，而不使用。你可以在这里阅读更多关于这个***.com/questions/41337709/…

【参考方案2】：

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

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

【讨论】：

请参考我的更新，我附加了更多的描述、代码和屏幕

【参考方案3】：

发现问题...

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

错误

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

正确

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

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

【讨论】：

import ShoppingList 将尝试从默认导出导入属性ShoppingList，而import ShoppingList 导入默认导出。如果，在ShoppingList.js，你正在做export default class ShoppingList，那么你会想要导入默认导出，即import ShoppingList