Блог

В порядке ли этот редуктор:

 function someReducer(state = initialState, action) {
   if (action.type === SOME_ACTION) {
      const newState = Object.assign( {}, state );
      // ...
      // doing whatever I want with newState 
      // ...
      return newState;
   }   
   return state;
}
  

и если в порядке, зачем нам нужны все эти неизменяемые библиотеки, чтобы усложнять нашу жизнь.

p.s Просто пытаюсь понять Redux и неизменность

 export default function (state = initialState, action) {

  const actions = {
    SOME_ACTION: () => {
      return {
        ...state
      }
    },
    ANOTHER_ACTION: () => {
      return {
        ...state
        error: action.error
      }
    },
    DEFAULT: () => state;
  }
  
  return actions[action.type] ? actions[action.type]() : actions.DEFAULT(); 
}  

Я предпочитаю делать это вместо этого. Я не большой поклонник инструкций switch.

Стандартный подход заключается в использовании синтаксиса switch/case with spread ( ... ) в вашем редукторе.

 export default function (state = initialState, action) {
  switch (action.type) {
    case constants.SOME_ACTION:
      return {
        ...state,
        newProperty: action.newProperty
      };

    case constants.ERROR_ACTION:
      return {
        ...state,
        error: action.error
      };

    case constants.MORE_DEEP_ACTION:
      return {
        ...state,
        users: {
          ...state.users,
          user1: action.users.user1
        }
      };

    default:
      return {
        ...state
      }
  }
}
  

Затем вы можете использовать синтаксис распространения ES6, чтобы вернуть свое старое состояние с любыми новыми свойствами, которые вы хотите изменить / добавить к нему.

Вы можете прочитать больше об этом подходе здесь …https://redux.js.org/recipes/using-object-spread-operator

Я нашел то, что мне действительно нравится:

  import createReducer from 'redux-starter-kit';
 const someReducer = createReducer( initialState, {
    SOME_ACTION: (state) => { /* doing whatever I want with this local State */ },
    SOME_ANOTHER_ACTION: (state) => { /* doing whatever I want with local State */ },
    THIRD_ACTION: (state, action) => { ... }, 
 });
  

Если в вашем состоянии есть вложенные объекты или массивы, Object.assign или ... скопирует ссылки на вашу более старую переменную состояния, и это может вызвать некоторую проблему. Это причина, по которой некоторые разработчики используют неизменяемые библиотеки, поскольку в большинстве случаев состояние имеет глубоко вложенный массив или объекты.

 function someReducer(state = initialState, action) {
   if (action.type === SOME_ACTION) {
       const newState = Object.assign( {}, state );
       // newState can still have references to your older state values if they are array or orobjects

      return newState;
   }   
   return state;
}