React-Redux：如何实际更新依赖于 store 的其他值的 redux store 的状态答案

【问题标题】：React-Redux: How to actually update a state of redux store which has dependency on other values of the storeReact-Redux：如何实际更新依赖于 store 的其他值的 redux store 的状态
【发布时间】：2020-06-11 16:35:53
【问题描述】：

我是使用 React-Redux 的新手。因此，我在这种特殊情况下面临一些问题。我的 Redux Store 是这样的：

{
    info: {firstName: 'abc', lastName: 'xyz', email: abc.xyz@gmail.com, name: 'abc xyz', id: 145},
    userInfo: {firstName: 'abc', lastName: 'xyz', email: abc.xyz@gmail.com, contactNumber: 1234567890, country: 'India'}
}

现在，我从不同的页面收到这两个详细信息。我将它们存储在商店中，并使用 react-redux 进行 API 调用以更新商店数据。因此，我使用单独的 API 调用接收这两个数据。现在，当我更新 userInfo 有效负载时，我可以成功更新我的 userInfo 存储状态。但是，firstName 和 lastName 是两个常见的字段。因此，每次我更新 userInfo 时，更新信息的最佳做法应该是什么，因为它们必须同步且相同。

粘贴一些redux代码供参考：

reducer.js（仅供参考）

import * as actionTypes from './actionTypes';

export const initialState = {
  email: null,
  firstName: null,
  id: null,
  lastName: null,
  name: null
};

export default function(state = initialState, action) {
  switch (action.type) {
    case actionTypes.SET_INFORMATION: {
      const { info = {} } = action;
      return { ...info };
    }
    default:
      return state;
  }
}

reducer.js（用于 userInfo）

import * as actionTypes from './actionTypes';

export const initialState = {
    firstName: null,
    lastName: null,
    email: null,
    contactNumber: null,
    country: null
};

export default function(state = initialState, action) {
  switch (action.type) {
    case actionTypes.USER_INFORMATION: {
      const { userInfo = {} } = action;
      return { ...state, ...userInfo };
    }
    case actionTypes.GET_USER_INFORMATION_ERROR:
    case actionTypes.PATCH_USER_INFORMATION_HEADER_ERROR: {
      const { error = {} } = action;
      return { ...error };
    }
    case actionTypes.PATCH_USER_INFORMATION_HEADER: {
      const { userInfo: { data = {} } = {} } = action;
      return { ...state, ...data };
    }
    default:
      return state;
  }
}

请帮助我采用最佳做法，以便在更新另一个数据时更新这两个数据以保持数据同步。 TIA。

【问题讨论】：

您在使用combineReducers 实用程序吗？它需要一个带有多个 reducers 的对象。
@Akhilesh 是的，我正在使用组合减速器。

标签： reactjs redux react-redux redux-store

【解决方案1】：

对于更以reducer 为中心的方法，使用另一个reducer（作为包装器）来处理需要在reducer 之间共享数据的情况，如下所示：

const combinedReducer = combineReducers({
    info: infoReducer,
    userInfo: userInfoReducer
});

function specialCaseReducerWrapper(state, action) {
    switch (action.type) {
        case "SOME_SPECIAL_ACTION": {
            return {
                // specifically pass state.userInfo as an additional argument
                info: infoReducer(state.info, action, state.userInfo),
                userInfo: userInfoReducer(state.userInfo, action)
            };
        }
        default:
            return state;
    }
}

function rootReducer(state, action) {
    const intermediateState = combinedReducer(state, action);
    const finalState = specialCaseReducerWrapper(intermediateState, action);
    return finalState;
}

供参考，请查看Beyond combineReducers

【讨论】：

【解决方案2】：

每次我更新 userInfo 时，更新信息的最佳做法应该是什么，因为它们必须同步且相同

最佳做法是从不保持状态中的重复数据。你已经经历了很多尝试同步它，而且随着时间的推移它会变得更糟。您很可能会遇到数据不同步的情况，您或使用此代码的其他人可能只是在实施新更改后忘记再次同步它。这些错误也很难捕捉

如果您的商店切片之间有公共数据，则只需要保留 1 个实例

【讨论】：