不可变的反应减速器状态不更新

Question

我正在尝试使用 react-redux 和不可变分配库（而不是不可变的）来创建一个简单的网站来处理我的状态。（不可变分配的文档：https://github.com/engineforce/ImmutableAssign）

我已经用 'immutable' 和 'immutable-assign' 库制定了解决方案，但都不起作用（不可变解决方案的代码在下面的 reducer 中被注释掉了。无论我做了哪些更改，状态永远不会改变，并且值永远不会分配给 menuItems

setMenu(newMenu) 函数当前使用以下格式的数组列表形式的 dummydata 调用：

menuItems: {
            id: "113",
            foodItem: "tesatewr",
            description: "gfdgsdfsdf",
            price: 999
        }

减速器：

import { iassign } from 'immutable-assign'

export function setMenu(newMenu) {return {type: 'SET_MENU_ITEMS', newMenu}}

const initialState = {
  date: 'test', 
  menuId: 'test', 
  menuItems: []     

  }

 function menuViewReducer(state = initialState, action){
  switch(action.type){
    case 'SET_MENU_ITEMS':

      var itemList = iassign(
          state,
          function (n) { n.push('testtest'); return n}
      )

      return state.set(['menuItems'], itemList)
    default:
      return state  
  }
}

/* CODE FOR IMMUTABLE
 function menuViewReducer(state = fromJS(initialState), action){
  switch(action.type){
    case 'SET_MENU_ITEMS':
      return state.updateIn(['menuItems'], (menuItems) => menuItems.push(fromJS(action.newMenu.menuItems)))
    default:
      return state  
  }
} */


export const menuSelector = {
  date: state => state.menuViewList.date,
  menuId: state => state.menuViewList.menuId,
  menuItems: state => state.menuViewList.menuItems
}

export default menuViewReducer

渲染函数：

render(){
    return (
      <div>
        Test data here: {this.props.menuItems}
        <ul className="menuViewList">{ this.mapMenuItemsToListElements() }</ul>
        <button 
        onClick={() => this.mapMenuItemsToListElements()}> get data  
        </button>
      </div>

    )
  }

Answer 1

很难从这段代码中找出什么不起作用。我能做的就是给你一些调试技巧：

首先，您是否遇到任何错误？如果是，那似乎是个不错的起点。

否则，请尝试缩小问题发生的范围。

你确定你的减速器真的被调用了吗？
我会尝试在你的 case 'SET_MENU_ITEMS': 之后放一个 console.log 这样你就知道你的代码什么时候被运行.

如果不是:
问题可能有很多：

您的减速器未正确连接到您的商店
您没有正确地向您的商店发送操作
您正在调度的操作没有正确设置 type 属性。

如果是：

问题可能有很多不同的地方。我能想到的一些：

您的状态未（正确）更新。尝试在减速器开始时记录状态，并在 return 之前记录新状态。或者考虑使用 redux-devtools 检查您的状态。
您的视图没有更新。也许您的组件没有正确连接到您的商店。

Answer 2

我发现了错误，正如 Simon 所指出的，很难从我提交的代码中找到它。

我在生成器函数中调用了 setMenu(newMenu)，所以我应该这样调用它：

yield put(setMenu(newMenu))

而不是

setMenu(newMenu)

不可变的反应减速器状态不更新

immutable react reducer state is not updating

reactjs

immutable.js

redux