javascript – React Redux connect(mapStateToProps)

前端之家收集整理的这篇文章主要介绍了javascript – React Redux connect(mapStateToProps)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我最近开始和React一起工作,即使我经常遇到问题,我也很享受.

组件#1,我通过单击按钮发出GET请求,然后在表格中显示一些数据.

组件#2是一个输入字段,我想输入一些数据,并在下面显示,应该是简单的吗?

当我发出一个动作并完成我的GET请求时,状态如下所示:

  1. {
  2. isFetching: false,isPressed: true,items: [{item: 1},{item: 2},{item: 3}]
  3. }

然后我想导航到我的其他组件.我需要取消订阅吗?因为当我导航到我的另一个组件所在的另一个页面时,状态将保持不变.

如果我在我的组件#2上发送一个动作,状态如下所示:

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

在这两个组件中,我使用的是mapStateToPros,尽管我并不真正理解它是如何工作的,这就是我相信我遇到问题的地方和原因.

  1. function mapStateToProps(state) {
  2. return state;
  3. }

它只是返回现在的状态.当我在组件之间切换时,我会收到错误消息.如果我在我的组件#2上发送一个动作,然后尝试导航到我的组件#1(GET-REQUEST),我将得到以下内容

  1. prev state Object { isFetching=false,isPressed=true,items=[10]}
  2. action Object { type="ADD_TODO",id=0,text="asd"}
  3. next state [Object { id=0,text="asd"}]

导航到其他页面

  1. Error: `mapStateToProps` must return an object. Instead received [object Object].

应该如何在我的场景中使用mapStateToProps?

我需要使用componentWillUnmount吗?取消订阅我的商店?

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

任何关于思想过程的链接,建议以及其他有用的东西都非常适合.

编辑:

这是我的减速机:

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

  1. case ADD_TODO:
  2. return [
  3. ...state,todo(undefined,action)
  4. ]
  5. const todo = (state = [],action) => {
  6. case ADD_TODO:
  7. return {
  8. id: action.id,text: action.text
  9. }
  10. }

但是,如果我返回一个对象而不是一个数组,“扩展运算符”将不起作用.还有其他选择(…)吗?

最佳答案
这是一个数组:

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

使它成为一个对象:

  1. {
  2. myData: [
  3. {id: 1,text: 'bar'}
  4. ]
  5. }

并且不要“取消订阅”州. Redux将所有状态存储在一个对象中.每个组件有选择地在提供给Redux connect()的函数(mapStateToProps)中声明它们所需的状态属性.

编辑

作为响应更新的问题 – 您将传入一个默认状态的数组.使用对象:

  1. const todo = (state = {},action) => {
  2. // initialize your default state properties
  3. switch (action.type) {
  4. case ADD_TODO:
  5. return {
  6. ...state
  7. id: action.id,text: action.text
  8. }
  9. default:
  10. return state;
  11. }
  12. }

您可能希望在reducer中初始化默认状态属性.但所有这些东西都在docs / examples中.

哦,如果你问我更多的建议,这是一个礼貌的upvote

猜你在找的JavaScript相关文章