React + Redux 连接（mapStateToProps）

Question

我最近开始使用 React，尽管我经常运行遇到问题，但我很享受它。

Component #1 我通过单击按钮发出 GET 请求，然后在 table.

中显示一些数据

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

这只是 return 目前的状态。当我在组件之间切换时，我会收到错误消息。如果我在我的组件 #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
            }
   }

但是，如果我 return 对象而不是数组，"spread operator" 将不起作用。那么还有其他选择吗 (...) ?

Answer 1

这是一个数组：

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

将其设为对象：

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

并且不要 "unsubscribe" 来自州。 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;
   }
}

您可能想要在减速器中初始化默认状态属性。但是所有这些东西都在 docs/examples.

哦，如果您要我提供更多建议，请投赞成票:)

React + Redux 连接（mapStateToProps）

React + Redux connect (mapStateToProps)

javascript

reactjs

redux