这个 redux reducer 可以吗

Question

这个减速器可以吗：

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 和不变性

Answer 1

标准方法是在你的 reducer 中使用扩展语法 (...) 的 switch/case。

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 传播语法 return 您的旧状态，以及您想要的任何新属性 changed/added。

您可以在此处阅读有关此方法的更多信息... https://redux.js.org/recipes/using-object-spread-operator

Answer 2

如果您的状态有嵌套对象或数组，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;
}

Answer 3

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 语句。

Answer 4

我找到了我真正喜欢的东西：

 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) => { ... }, 
 });

这个 redux reducer 可以吗

Is this redux reducer OK

javascript

immutability

reactjs

redux