在Redux中改变状态

Question

我试图在state中添加一个元素并更改另一个数组元素的属性。假设我们有以下state结构：

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

在派遣ADD_MENU_ITEM行动之后，我想最终得到这个state：

{
  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，但它永远不会有效。我在返回状态之前将状态记录到控制台并且它正确记录，但是当记录到获得re-rendered的组件时，menuItems数组不会添加第一个项目，尽管active成员设置为false。

我能做错什么？

Answer 1

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 }))
      ];
    }
  }
}

有关减速器的更多信息，请访问：Redux Reducers Documentation

文档的有用摘录：

减速机保持纯净非常重要。你应该在减速机内做的事情：

• 改变其论点;
• 执行API调用和路由转换等副作用;
• 调用非纯函数，例如Date.now（）或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)}
  });