javascript - Redux 增强器示例

Question

我是redux的新手。我想知道如何在 redux 中创建自己的增强器。我没有找到任何示例来创建 增强剂 .要创建增强器，那么我需要传递哪些参数以及需要返回哪些参数？创建自定义增强器有什么规则吗？
在有关增强器的 redux 文档中，在以下两个链接中找到(没有示例或示例代码)

store-enhancer

using store enhancer

Redux 文档说，

Middleware adds extra functionality to the Redux dispatch function; enhancers add extra functionality to the Redux store. ... A middleware which logs dispatched actions and the resulting new state. An enhancer which logs the time taken for the reducers to process each action.

所以，我不确定自定义中间件和自定义增强器编码规则是否相同，如下所示

const loggerMiddleware = storeAPI => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', storeAPI.getState())
  return result
}

所以，我的问题是 如何创建自定义增强器？

Answer 1

Here是商店增强器界面

export type StoreEnhancer<Ext = {}, StateExt = never> = (
  next: StoreEnhancerStoreCreator<Ext, StateExt>
) => StoreEnhancerStoreCreator<Ext, StateExt>
export type StoreEnhancerStoreCreator<Ext = {}, StateExt = never> = <
  S = any,
  A extends Action = AnyAction
>(
  reducer: Reducer<S, A>,
  preloadedState?: PreloadedState<S>
) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext

enhancers是采用 createStore 的高阶函数并返回 createStore 的新增强版本.看看这个示例实现。

const ourAwesomeEnhancer = createStore => (reducer, initialState, enhancer) => {
  const store = createStore(monitoredReducer, initialState, enhancer);
  //  add enhancer logic

  return {
    ...store
    //   you can override the some store properties or add new ones
  };
};

official doc 中有一个例子:

const round = number => Math.round(number * 100) / 100

const monitorReducerEnhancer = createStore => (
  reducer,
  initialState,
  enhancer
) => {
  const monitoredReducer = (state, action) => {
    const start = performance.now()
    const newState = reducer(state, action)
    const end = performance.now()
    const diff = round(end - start)

    console.log('reducer process time:', diff)

    return newState
  }

  return createStore(monitoredReducer, initialState, enhancer)
}

export default monitorReducerEnhancer