Question

我正在尝试使用react-redux和immutable-assign库（而不是immutable）创建一个简单的网站来处理我的状态。（immutable-assign的文档：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

很难弄清楚这段代码没有起作用。我能做的最好的就是给你一些调试技巧：

首先，你有任何错误吗？如果是，那似乎是一个好的开始。

否则，请尝试缩小问题发生的位置。

您确定您的减速机实际上已被召唤吗？
我会尝试在console.log之后加case 'SET_MENU_ITEMS':，以便您知道代码何时运行。

如果不是：
问题可能是很多事情：

您的减速机未正确连接到您的商店
您未正确向商店发送操作
您发送的操作未正确设置type属性。

如果是：

问题可能是许多不同的事情。我能想到的一些：

您的状态未正确更新（正确）。尝试在返回之前记录reducer开始时的状态和新状态。或者考虑使用redux-devtools来检查您的州。
您的观点未获得更新。也许您的组件没有正确连接到您的商店。

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

1 个答案: