首页 文章

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

提问于
浏览 次
0

我仍然围绕着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.

我的问题是通过行动最好的方法来承载现有的国家？

reactjs redux

1 回答

  • 3

    绝对不是你已经在 state.myObj 和 PENDING 行动 existing state 为什么你这样做

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

    }
};
    回复于

相关问题