0

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

{
    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（用于用户信息）

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。

4

2 回答 2

1

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

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

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

于 2020-06-11T08:35:53.360 回答
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

于 2020-06-11T08:23:05.723 回答