在Redux中,如何仅更新状态对象的一部分?

时间:2018-05-07 16:49:20

标签: reactjs redux

我仍然围绕着Redux,想知道我的部分更新状态对象的解决方案是否是最好的方法。

这是一个例子,在我的行动中我有两个函数 - getA和getB,它们共享相同的状态,每个只更新状态的一部分。然后我将现有状态传递给我的减速器。

// Action
export function getA() {
  return (dispatch, getState) => {
    const existing = getState().myReducer.myObj;
    dispatch({type: PENDING, existing})
    // ... Fetch data "A" from API
    // On success...
     dataA => dispatch({type: CASE_A, existing, dataA})
  }
};
export function getB() {
  return (dispatch, getState) => {
    const existing = getState().myReducer.myObj;

    // ... Fetch data "B" from API
    // On success...
    dataB => dispatch({type: CASE_B, existing, dataB})
  }
};

// Reducer
initialState = {
  ...
  myObj: {
    keyA: null,
    keyB: null
  }
};

export default function myReducer(state = initialState, action) {
  switch(action.type) {
    case PENDING:
      return {
        ...state,
        myObj: {
          ...action.existing
        }
      }
    case CASE_A:
      return {
        ...state,
        myObj: {
          ...action.existing
          keyA: action.dataA
        }
      }
    case CASE_B: 
      return {
        ...state,
        myObj: {
          ...action.existing
          keyB: action.dataB
        }
      }
    // ...
  }
};

一切正常,现有的myObj被传递到挂起状态,然后根据调用的动作更新A或B.

我的问题是通过行动最好的方法来承载现有的状态吗?

1 个答案:

答案 0 :(得分:3)

绝对不是existing state state.myObjPENDING myObj: { ...action.existing } 行动,为什么你这样做

myObj = action.existing

如果要替换完整对象,可以执行此操作export default function myReducer(state = initialState, action) { switch (action.type) { case PENDING: return { ...state, myObj: { ...state.myObj } } case CASE_A: return { ...state, myObj: { ...state.myObj, keyA: action.dataA } } case CASE_B: return { ...state, myObj: { ...state.myObj, keyB: action.dataB } } } };

UDP_PORT=8765