react-redux实现CRUD的reducer设计与redux-saga使用问题咨询

结论 #

不需要为每个接口单独创建reducer，仅需调整统一reducer的state结构即可解决状态区分问题，还可以抽象通用逻辑适配后续新增的CRUD模块。

问题根源 #

你当前的initialState仅定义了全局共用的loading、error字段，所有CRUD操作共享这两个状态，自然无法区分是哪个接口触发的加载/错误状态。

优化方案 #

调整state结构，为每个操作单独维护独立的状态：

const initialState = {
  userList: [], // 存储FETCH接口返回的用户列表核心数据
  operations: {
    create: { loading: false, error: null },
    update: { loading: false, error: null },
    delete: { loading: false, error: null },
    fetch: { loading: false, error: null }
  }
};

对应修改reducer的case逻辑，仅修改对应操作的状态即可，例如触发CREATE_USER_REQUEST时，仅把operations.create.loading设为true，其他操作的状态不受影响。

如果后续需要接入多组其他CRUD模块，可以抽象高阶reducer生成函数，避免重复代码：

// 通用CRUD reducer生成函数
function createCRUDReducer(actionTypeMap) {
  const initialState = {
    list: [],
    detail: null,
    operations: {
      create: { loading: false, error: null },
      update: { loading: false, error: null },
      delete: { loading: false, error: null },
      fetch: { loading: false, error: null }
    }
  };
  return function (state = initialState, action) {
    switch (action.type) {
      case actionTypeMap.CREATE_REQUEST:
        return {
          ...state,
          operations: {
            ...state.operations,
            create: { loading: true, error: null }
          }
        };
      // 其他通用请求/成功/失败逻辑统一实现
      default:
        return state;
    }
  };
}

// 生成用户模块reducer
const userReducer = createCRUDReducer({
  CREATE_REQUEST: CREATE_USER_REQUEST,
  CREATE_SUCCESS: CREATE_USER_SUCCESS,
  CREATE_FAILURE: CREATE_USER_FAILURE,
  // 剩余其他action类型依次传入
});

结论 #

你当前直接调用fetchUserList方法的写法不规范，推荐通过dispatch action的方式触发列表刷新。

现有写法的问题 #

直接调用generator函数的方式不会走saga的监听逻辑，如果fetchUserList是通过takeLatest/takeEvery注册的worker saga，直接调用会跳过防抖、参数校验等前置逻辑，同时耦合度极高，后续修改fetchUserList的触发规则时需要同步修改createUser内的代码，维护成本高。

正确写法 #

在创建用户成功后，put一个拉取用户列表的request action即可：

function* createUser({ payload }) {
  try {
    yield requestCreateUser(payload);
    // 触发拉取列表的action，走正常的redux事件流
    yield put(fetchUserListRequest({ page: 1, pageSize: 10 }));
  } catch (error) {
    yield put(createUserFailure('创建用户失败'));
  }
}

该写法完全遵循redux的事件驱动逻辑，和拉取列表的逻辑完全解耦，同时能保证拉取列表的加载、错误状态正确同步到reducer中。

内容的提问来源于stack exchange，提问作者Shadab Faiz