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

您可能想要初始化化简器中的默认状态属性。但所有这些内容都在文档/示例中。

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