react-redux 项目中的高阶 reducer

Posted 2023-02-19

【中文标题】react-redux 项目中的高阶 reducer

【英文标题】：high-order reducer in a react-redux project

【发布时间】：2022-01-11 23:06:31

【问题描述】：

我加入了一个用 React.js 编写的带有 redux 和 saga 的项目。 store 中的 reducer 是使用 pipe 函数编写的：

export const HighestOrderReducer = (...higherOrderReducers) => (baseReducer) =>
  higherOrderReducers.reduce(
    (reducer, nextHigherOrderReducer) => nextHigherOrderReducer(reducer),
    baseReducer
  );

所以，例如，我有一个动作的调度：

 dispatch(createSocketConnection(token));

创建具有 SOCKET_ACTION_TYPES.GET.START 类型和有效负载令牌的操作。

这就是这个 slice 的 reducer 的样子：

export default HighestOrderReducer (
  withResetState(SOCKET_ACTION_TYPES.RESET_STATE, initialState),
  withLoadable(
    isLoadingActionType: [SOCKET_ACTION_TYPES.GET.START],
    successActionType: [SOCKET_ACTION_TYPES.GET.SUCCESS],
    errorActionType: [SOCKET_ACTION_TYPES.GET.ERROR]
  )
)(reducer);

这是一个管道函数，可以重写为

  withLoadable(
    isLoadingActionType: [SOCKET_ACTION_TYPES.GET.START],
    successActionType: [SOCKET_ACTION_TYPES.GET.SUCCESS],
    errorActionType: [SOCKET_ACTION_TYPES.GET.ERROR]
  )
(withResetState(resetStateActionType, initialState)(reducer)(state, action))
(state, action)

这里是 withResetState、withLoadable 和 reducer 函数：

// the first function of the pipeline
export const withResetState = (resetStateActionType, initialState) => (baseReducer) => (state, action) => 
  const newState = action.type === resetStateActionType ?  ...initialState  : state;
  return baseReducer(newState, action);
;

现在，如果您查看 withResetState 函数，使用给定的操作类型和减速器，它会返回一个对象，initialState。我的问题是，为了使管道的第二个函数 withLoadable 起作用，第一个函数应该返回某种函数，据我所知，它并没有。

那么，能否请您告诉我天气我错过了什么并且第一个函数确实返回了一个函数，或者我在现有项目中发现了一个错误？

【参考方案1】：

我认为您误读了代码。 withResetState 确实返回一个函数，因为它是使用嵌套箭头函数编写的：

const withResetState = (resetStateActionType, initialState) => (baseReducer) => (state, action) => 
  const newState = action.type === resetStateActionType ?  ...initialState  : state;
  return baseReducer(newState, action);
;

这可以改写为：

function withResetState(resetStateActionType, initialState) 
  return function wrapBaseReducer(baseReducer) 
    return function actualReducer(state, action) 
      const newState = action.type === resetStateActionType ?  ...initialState  : state;
      return baseReducer(newState, action);
    

  

actualReducer 是最终使用的 reducer 函数。

也就是说，虽然 Redux 本身确实强调使用函数式编程原则，我们甚至 show use of higher-order reducers in our docs...

就个人而言我觉得这太抽象了，很难理解，因此一开始就建议不要以这种方式编写代码。