Question

我有以下要实现的规范化状态形状。

{
    userAccounts: {
        byId: {
            "1234": {
                "id": "1234",
                "name": "Obi-wan",
                "gender": "Male",
                "age": 40
            },
            "4321": {
                "id": "4321",
                "name": "Padme",
                "gender": "Female",
                "age": 26
            },
            ...
        },
        allIds: ["1234", "4321", ...]
    }
}

这是获取数据以获取用户帐户的操作。

export const getAccounts = () => {
  return (dispatch) => {
    dispatch({type: GET_ACCOUNTS_REQUEST});
    return API.getAccountsList(session).then(
      (response) => {
        dispatch({
          type: GET_ACCOUNTS_SUCCESS,
          payload: response
        })
      },
      (error) => {
        ...
      }
    )
  };
};

有效负载包含一个名为accounts的密钥，该密钥包含其他非相关字段中的数组。

payload: {
  accounts: [ { ... }, { ... } ],
  ...
}

我的reducer等待动作GET_ACCOUNTS_SUCCESS，我使用combineReducers。

[GET_USERS_SUCCESS]: (state, action) => {
    return combineReducers({
      byId,
      allIds
    });
}

我目前对reducer的实现是这样的：

const byId = (state, action) => {
  const { accounts } =  action.payload;
  const nextState = {
    byId: {},
    allIds: []
  };
  accounts.map(account => {
    nextState.byId[account.id] = {
      ...account
    };
    nextState.allIds = [
      ...nextState.allIds,
      account.id
    ]
  });
  return nextState;
};

我想将这些减速器分成两部分，以便更好地分离关注点，避免做两张地图。

有什么想法吗？

Answer 1

您可以创建两个新的缩减器，收听由SET_ACCOUNT_BY_ID操作调度的两个新操作SET_ACCOUNT_BY_ALL_IDS和GET_ACCOUNTS_SUCCESS（作为示例）。在分派这两个动作时，您只能将所需的数据传递给它们。

在同一行动中使用减速器的关注点分离

1 个答案: