React + Redux连接（mapStateToProps）

我最近开始与React合作，即使我经常遇到问题，我也非常享受它。React + Redux连接（mapStateToProps）

组件＃1其中I使通过一个按钮点击的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吗？取消订阅我的商店？

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

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

编辑：

这是我的减速器：

由于瑞奇以下建议，我需要让我的数组为对象。

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


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

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

但是，如果我返回一个对象而不是数组，则“展开运算符”将不起作用。那么是否有另一种选择（...）？

来源

2016-02-06 Cheese Puffs

这是一个数组：

[ 
    {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中的默认状态属性。但所有这些东西都在文档/示例中。

哦，如果你问我更多的建议，这是一个礼节性地给予好评:)

来源

2016-02-07 01:12:08

嘿瑞奇，感谢您的答复。我将如何去做这件事？如果你能看看我更新的帖子，会很高兴。 –

React + Redux连接（mapStateToProps）

回答

相关问题