Redux enhancer example

Question

我是 redux 新手。我想知道如何在 redux 中创建自己的增强器。我没有找到任何创建增强器的示例。要创建增强器，那么我需要传递哪些参数以及需要返回什么？创建自定义增强器有什么规则吗？

在有关增强器的 redux 文档中，找到以下两个链接（没有示例或示例代码）

• 商店增强剂
• 使用存储增强器

Redux 文档说，

中间件为 Redux 调度功能添加了额外的功能；增强器为 Redux 存储添加额外的功能。...记录分派操作和生成的新状态的中间件。一个增强器，记录减速器处理每个动作所花费的时间。

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

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

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

Answer 1

这是商店增强器界面

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
  };
};

官方文档中有一个示例：

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