React + Redux 连接 (mapStateToProps)

Question

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

---

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

Component #2是一个输入框，我想在里面输入一些数据，然后显示在下面，应该很简单吧？

---

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

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

然后我想导航到我的其他组件。我需要在这里取消订阅状态吗？因为当我导航到我的其他页面时，我的其他组件所在的位置将保持状态。

如果我在我的 组件 #2 上发送操作，状态如下所示：

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

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

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
            }
   }

但是，如果我返回一个对象而不是数组，“扩展运算符”将不起作用。那么（...）还有其他选择吗？

Answer 1

这是一个数组：

[
  {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;
   }
}

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

哦，如果您向我寻求更多建议，请点赞：)