Question

我对redux使用react。

操作：

export const updateClicked = (id, section) => {
  return {
    type: actionTypes.UPDATE_CLICKED,
    id,
    section
  };
};

请提供嵌套数组中不可变更新属性的最佳方法：

异径管：

const initialState = {
  updates: {
    html: {
      id: 'html',
      label: 'HTML',
      count: 0,
      items: [
        {
          id: 1,
          label: 'Header',
          price: 10,
          bought: false
        },
        {
          id: 2,
          label: 'Sidebar',
          price: 50,
          bought: false
        }
      ]
    }
  }
};

我的动作

action = {
  id: 1,
  bought: true
}

我想更新项数组中的bought属性。即：

const updateClicked= (state, action) => {
    const updateSections = state.updates[action.section].items;
    const updatedItems = updateSections.map(el => {
        if (el.id === action.id && !el.bought) {
          el.bought = true;
        }

        return el;
    });

   //How to update state???
   return {}
};

如果您能解释两种方法，将很高兴：

使用es6传播算子
带有一些库（例如不变性帮助器）

谢谢！

Answer 1

使用es6传播算子：

export default (state = initialState, action) => {
  if (action.type !== actionTypes.UPDATE_CLICKED) return state;
  return {
     ...state,
     updates: {
       ...state.updates,
       html: {
         ...state.updates.html,
         items: state.updates.html.items.map((item, idx) => idx === action.id
           ? {...item, bought: item.bought}
           : item
         )
       }
     }
  }
};

Redux不变模式

1 个答案: