Редукс неизменный образец - PullRequest
Новая
       20

Редукс неизменный образец

0 голосов
/ 21 сентября 2018

Я использую реагировать с избыточностью.

Действие : 

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 внутри массива items.Т.е.: 

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 {}
};

Будем рады, если вы объясните 2 способа сделать это:

  1. С оператором распространения es6
  2. С некоторой библиотекой (например, immutability-helper)

Спасибо!

1 Ответ

0 голосов
/ 21 сентября 2018

С оператором распространения 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
         )
       }
     }
  }
};
...