React + Redux connect (mapStateToProps)

React + Redux connect (mapStateToProps)

本文关键字：mapStateToProps connect Redux React      更新时间：2023-09-26

我最近开始使用 React，即使我经常遇到问题，我也非常喜欢它。

组件 #1，我通过单击按钮发出 GET 请求，并在表中显示一些数据。

组件#2是一个输入字段，我想在其中输入一些数据，并在下面显示，应该很简单吧？

当我调度一个操作并完成我的 GET 请求时，状态如下所示：

{
    isFetching: false,
    isPressed: true,
    items: [{item: 1}, {item: 2}, {item: 3}]
}

然后我想导航到我的其他组件。我需要取消订阅才能在此处声明吗？因为当我导航到另一个页面(我的其他组件所在的页面(时，状态将保持不变。

如果我在我的组件 #2 上调度一个操作，状态如下所示：

[
   {id: 1, text: 'foo'},
   {id: 2, text: 'bar'}
]

在这两个组件中，我都在使用 mapStateToPros，即使我并不真正了解它是如何工作的，这就是我相信我遇到问题的地方和原因。

function mapStateToProps(state) {
     return state;
}

它只是返回截至目前的状态。当我在组件之间切换时，我会收到错误消息。如果我在我的组件 #2 上调度一个操作，然后尝试导航到我的组件 #1 (GET-REQUEST(，我将得到以下内容：

prev state Object { isFetching=false,  isPressed=true,  items=[10]}
action Object { type="ADD_TODO",  id=0,  text="asd"}
next state [Object { id=0,  text="asd"}]

导航到其他页面

Error: `mapStateToProps` must return an object. Instead received [object Object].

在我的场景中应该如何使用mapStateToProps？

我需要使用 componentWillUnmount 吗？取消订阅我的商店吗？

我觉得我可以问一百个问题，但我不会。我一直在阅读文档，但我仍在努力弄清楚。

任何链接、关于思维过程的建议和其他有用的东西都非常受欢迎。

编辑：

这是我的减速器：

正如 Ricky 在下面建议的那样，我需要将我的数组变成一个对象。

 case ADD_TODO: 
        return [
            ...state,
            todo(undefined, action)
        ]

  const todo = (state = [], action) => {
       case ADD_TODO:
            return {
                id: action.id,
                text: action.text
            }
   }

但是，如果我返回一个对象而不是数组，"展开运算符"将不起作用。那么还有另一种选择吗(...

这是一个数组：

[
  {id: 1, text: 'foo'},
  {id: 2, text: 'bar'}
]

使其成为对象：

{ 
  myData: [
   {id: 1, text: 'foo'},
   {id: 2, text: 'bar'}
  ]
}

并且不要"取消订阅"状态。Redux 将所有状态存储在一个对象中。每个组件有选择地声明它们在提供给 Redux connect(( 的函数 (mapStateToProps( 中需要哪些状态属性。

编辑

作为对问题更新的响应 - 您正在传入默认状态的数组。使用对象：

const todo = (state = {}, action) => {
  // initialize your default state properties
  switch (action.type) {
     case ADD_TODO:
        return {
            ...state
            id: action.id,
            text: action.text
        }
     default: 
        return state;
   }
}

您可能希望在化简器中初始化默认状态属性。但所有这些东西都在文档/示例中。

哦，如果你向我寻求更多建议，对我投赞成票是一种礼貌:)

相关文章：