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].

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

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

我觉得我可以问一百个问题，但我不会。我一直在阅读文档，但我仍然想弄明白。

任何关于思考过程的链接，建议以及其他有用的东西都很受欢迎。

修改

这是我的减速机：

正如下面提到的 Ricky ，我需要将我的数组变成一个对象。

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


  const todo = (state = [], action) => {

       case ADD_TODO:
            return {
                id: action.id,
                text: action.text
            }
   }

但是，＆＃34;传播运营商＆＃34;如果我返回一个对象而不是一个数组将无法工作。那么（...）还有其他选择吗？

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中。

哦，如果你问我更多的建议，那就是赞成投票：）

React + Redux connect（mapStateToProps）

1 个答案: