reactjs – 在Redux中改变状态

我试图在状态中向数组添加元素并更改另一个数组元素的属性.假设我们有以下状态结构:

{
  menuItems: [{
    href: '/',
    active: true
  }]
}

在调度ADD_MENU_ITEM操作后,我希望最终得到以下状态:

{
  menuItems: [{
    href: '/new',
    active: true
  }, {
    href: '/',
    active: false,
  }]
}

我尝试过几种方式在Redux reducers中管理它:

function reducer(state = {}, action) {
  switch (action.type) {
    case ADD_MENU_ITEM: {
      let menuItems = state.menuItems;
      let newMenuItem = action.newMenuItem; 

      // First try
      menuItems[0].active = false;
      menuItems.unshift(newMenuItem);
      state = Object.assign({}, state, { menuItems: menuItems });

      // Second try 
      menuItems[0].active = false;
      menuItems.unshift(newMenuItem);
      state = Object.assign({}, state, {menuItems: Object.assign([], menuItems)});

      // Third try 
      menuItems[0].active = false;
      state = (Object.assign({}, state, {
        menuItems: [
          Object.assign({}, newMenuItem), 
          ...menuItems
        ]
      }));

      // Fourth try
      menuItems[0].active = false;
      state = update(state, {
        menuItems: {$unshift: new Array(newMenuItem)}
      });

      console.log(state);
      return state;
    }
  }
}

在第四次尝试中,我使用的是React的Immutability Helpers,但它永远不会有效.我在返回状态之前将状态记录到控制台并且它正确记录,但是当记录重新呈现的组件时,menuItems数组不会添加第一个项目,尽管活动成员设置为false.

我能做错什么?

最佳答案
reducer中的状态应该是不可变的,因此不应该修改.还建议尽可能展平您的物体.

在您的场景中,您的初始状态可能是一个数组:

[{
    href: '/',
    active: true
  }]

在您的reducer中,尝试返回一个全新的数组,如下所示:

function reducer(state = {}, action) {
  switch (action.type) {
    case ADD_MENU_ITEM: {
      return [
        action.newMenuItem,
        ...state.map(item => Object.assign({}, item, { active: false }))
      ];
    }
  }
}

有关Reducer的更多信息,请访问:Redux Reducers Documentation

文档的有用摘录:

It’s very important that the reducer stays pure. Things you should never do inside a reducer:

  • Mutate its arguments;
  • Perform side effects like API calls and routing transitions;
  • Calling non-pure functions, e.g. Date.now() or Math.random().

更多信息已添加

在您的reducer和所有四次尝试中,您在返回之前修改现有状态.

这会导致react-redux在检查状态是否已更改时,不会看到任何更改,因为前一个和下一个状态都指向同一个对象.

以下是我所指的行:

第一次尝试:

  // This line modifies the existing state.
  state = Object.assign({}, state, { menuItems: menuItems });

第二次尝试:

  // This line modifies the existing state.
  state = Object.assign({}, state, {menuItems: Object.assign([], menuItems)});

第三次尝试:

  // This line modifies the existing state.
  state = (Object.assign({}, state, {
    menuItems: [
      Object.assign({}, newMenuItem), 
      ...menuItems
    ]
  }));

第四次尝试:

  // This line modifies the existing state.
  state = update(state, {
    menuItems: {$unshift: new Array(newMenuItem)}
  });

转载注明原文:reactjs – 在Redux中改变状态 - 代码日志