Question

目前我必须调用三个不同的api端点来获取redux格式的下拉列表信息。

我的问题是将终点分为不同的状态集。我目前有三种不同的减少导入到索引减速器中，所以我可以在三个州条件下使用它们。我在三个文件中有几乎相同的代码：

//减速器/作业板/ job_tools

        import {FETCH_JOB_TOOLS} from "../../actions/job_list_actions";

    export default function(state = {}, action) {
        switch(action.type) {
            case FETCH_JOB_TOOLS:
                return action.payload.data;
            default:
                return state;
        }

    }


////reducer/job-board/job_roles


import {FETCH_JOB_ROLES} from "../../actions/job_list_actions";

export default function(state = {}, action) {
    switch(action.type) {
        case FETCH_JOB_ROLES:
            return action.payload.data;
        default:
            return state;
    }

}

看到这段代码几乎完全相同，我有办法让它干涸，仍然保留三个独立的部分

请求帮助。

谢谢。

Answer 1

您可以执行FETCH_JOB操作并从操作参数传递job_type。所以你在reducer中有一个独特的fetch函数，你将提供你正在提取的内容，这应该是你获取内容的关键状态。

store = { roles: [], tools: [] }

你的减速机看起来像：

import {FETCH_JOB} from "../../actions/job_list";

export default function(state = {}, action) {
    switch(action.type) {
        case FETCH_JOB:
            return {
              ...state,
              [action.job_type]: action.payload.data
            }
        default:
            return {...state};
    }

}

注意：在这种情况下，使用{ ...state, [...] }生成新状态非常重要，而不是仅改变前一个状态。

顺便说一下，我使用类似语法的数组而不是switch case。

您可以使用函数创建reducer并提供包含处理程序的数组。

import createReducer from './createReducer';

const loginReceived = (state, action) => ({
    ...state,
    authData: action.auth
});

// [...]

const ACTION_HANDLERS = {
  [AUTH_LOGIN_START]: loginStarted,
  [AUTH_LOGIN_COMPLETE]: loginReceived,
  [AUTH_LOGIN_FAIL]: loginFail
};

export default createReducer(initialState, ACTION_HANDLERS);

并将其用作createReducer函数

/**
 * Creates a reducer.
 * @param {string} initialState - The initial state for this reducer.
 * @param {object} handlers - Keys are action types (strings), values are reducers (functions).
 * @return {object} A reducer object.
 */
export default (initialState = null, handlers = {}) => (state = initialState, action) => {
  if (!action && !action.type) return state;
  const handler = handlers[action.type];
  return handler && handler(state, action) || state;
};

如何用Reducer保持干代码？

1 个答案: