React + Redux connect（mapStateToProps）

Question

我最近开始和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
            }
   }

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

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中初始化默认状态属性。 但所有这些东西都在docs / examples中。

哦，如果你问我更多的建议，这是一个礼貌的upvote :)