javascript - React + Redux连接(mapStateToProps)

我最近开始使用React，即使我经常遇到问题，我也很喜欢它。

组件＃1 ，通过单击按钮进行GET请求，并在表中显示一些数据。

组件＃2 是一个输入字段，我想在其中输入一些数据并在下面显示它，应该很简单吗？

当我调度一个 Action 并完成我的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上调度一个 Action ，然后尝试导航到组件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吗？退订我的商店吗？

我觉得我可以问一百个问题，但我不会。我一直在阅读文档，但仍在设法弄清楚。

任何链接，有关思考过程的建议以及其他有用的东西都非常实用。

编辑:

这是我的 reducer :

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

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


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

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

但是，如果我返回一个对象而不是一个数组，则“spread运算符”将不起作用。还有(...)吗？

最佳答案

这是一个数组:

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

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

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

关于javascript - React + Redux连接(mapStateToProps)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35247930/