Reactjs Redux，如何重用reducer/操作？

我正在尝试创建一个HOC或至少减少reducer/action的数量。因此，我创建了一个库缩减器来保存所有数据，并创建了一个getItemList操作来处理每个操作。从react componentDidMount（）调用操作时，我将传递一个参数，如（产品、用户等），此参数将知道要更新的api和状态（例如：state.library.product）

我想听听你对这项技术的建议，这是一个好方法吗

谢谢

const initialState={
联系人：{
tmp_状态：{地址：{}，
项目：空，
receivedAt:null，
isFetching:false，
伊瑟罗：错，
名单：[]
},
费用：{
tmp_州：{}，
项目：空，
receivedAt:null，
isFetching:false，
伊瑟罗：错，
名单：[]
},
服务：{
tmp_州：{}，
项目：空，
receivedAt:null，
isFetching:false，
伊瑟罗：错，
名单：[]
},
产品：{
tmp_州：{}，
项目：空，
receivedAt:null，
isFetching:false，
伊瑟罗：错，
名单：[]
}
};
导出默认值（状态=初始状态，操作）=>{
//初始化减速器名称
var name=action.type.split（“”）.pop（）.toLowerCase（）；
开关（动作类型）{
案例`请求${name.toUpperCase（）}`:
返回{
……国家，
[姓名]：{
…说明[姓名]，
是的，
},
}
案例`失败${name.toUpperCase（）}`:
返回{
……国家，
[姓名]：{
…说明[姓名]，
isFetching:false，
伊瑟罗：是的，
}
}
案例`接收${name.toUpperCase（）}`:
返回{
……国家，
[姓名]：{
…说明[姓名]，
isFetching:action.isFetching，
列表：action.payload，
receivedAt:action.receivedAt
}
}
案例'GET.${name.toUpperCase（）}'：
返回{
……国家，
[姓名]：{
…说明[姓名]，
项目：action.item，
isFetching:action.isFetching，
}
}
case`STATE\${name.toUpperCase（）}`:
var fieldName=action.payload.fieldName.startsWith（“”）
if（字段名）{
state[name].tmp_state.addresses={…state[name].tmp_state.addresses[action.payload.fieldName]：action.payload.value}
}否则{
state[name].tmp_state={…state[name].tmp_state[action.payload.fieldName]：action.payload.value}
}
返回{
……国家，
[姓名]：{
…国家[名称]
}
}
案例`创建${name.toUpperCase（）}`:
返回{
……国家，
[姓名]：{
…说明[姓名]，
isFetching:action.isFetching，
tmp_状态：initialState[名称]。tmp_状态，
列表：[…状态[名称]。列表，操作.item]
}
}
违约：
返回状态；
}
}

将reducer拆分为我们要重用的

baseReducer

-reducer和将

baseReducer

应用于状态的每个片段的

default

-reducer

class BaseState {
  tmp_state = {};
  item = null;
  receivedAt = null;
  isFetching = false;
  isError = false;
  list = []
}

export const baseReducer = (state = new BaseState(), action) => {
  switch (action.payload.subtype) {
    case `REQUEST`:
      return {
        ...state,
        isFetching: true,
      }
    case `FAILED`:   /* code */
    case `RECEIVE`:  /* code */
    case `GET`:      /* code */
    case `STATE`:    /* code */
    case `CREATE`:   /* code */
    default:         /* code */

  }
}

class InitialState = {
  contact = new BaseState();
  expense = new BaseState();
  service = new BaseState();
  product = new BaseState();
}

export default (state = new InitialState(), action) => {
  switch (action.type) {
    case 'CONTACT':
      return {
        ...state,
        contact: baseReducer(state.contact, action)
      }
    case 'EXPENSE': /* the same */
    case 'SERVICE': /* the same */
    case 'PRODUCT': /* the same */
    default: return state;
  }
}

如果我们有很多项目，我们可以进一步推广

default

reducer

const smartCompose = mapActionTypeToState => (state, action) => {
  const stateSlice = mapActionTypeToState[action.type];
  if (!stateSlice) return state;

  return {
    ...state,
    [stateSlice]: baseReducer(state.contact, action),
  }
}

const mapActionTypeToState = {
  CONTACT: 'contact',
  EXPENSE: 'expense',
  SERVICE: 'service',
  PRODUCE: 'produce',
};

export const defaultReducer = smartCompose(mapActionTypeToState);

---

你的代码运行正常，我认为没有问题。我会做稍微不同的事情。我会将该reducer包装在一个函数中，并传递reducer关心的状态片的名称和初始状态，例如：

const makeReducer = (name, initialState) => (state = initialState, action) => {

    var actionType = name.toUpperCase();

    switch (action.type) {
        case `REQUEST_${actionType}`:
            return  { 
                ...state,
                [name]: {
                    ...state[name],
                    isFetching: true,
                },
            }
        // the rest, replace constants accordingly

}

那么主减速器将是：

export default combineReducers({
      contact: makeReducer("contact", initialState.contact),
      expense: makeReducer("expense", initialState.expense),
      service: makeReducer("service", initialState.service),
      product: makeReducer("product", initialState.product)
});

您可以在不同的情况下使用组合减速器来重用减速器逻辑

---

检查redux文档：

，这看起来是一个不错的方法，而不是每个组件都有单独的操作和减速器。我看不出这种方法的缺点