时间戳

首页 > 解决方案 > Redux 增强器示例

javascript - Redux 增强器示例

问题描述

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

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

Redux 文档说，

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

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

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

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

标签： javascriptreduxreact-redux

解决方案

这是商店增强器界面

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

官方文档中有一个例子：

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

推荐阅读