时间戳

首页 > 解决方案 > 在 Redux 中，如何只更新状态对象的一部分？

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。

我的问题是通过行动来承载现有状态的最佳方法？

标签： reactjsredux

解决方案

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

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

    }
};

推荐阅读