Redux 增强器示例

Question

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

在有关增强器的 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
  };
};

官方文档中有一个示例：

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

Answer 2

这是官方文档中的一些示例https://github.com/reduxjs/redux-fundamentals-example-app/blob/7d17ec4fa5d46c839adfd8c716ccfedaf365f7c0/src/exampleAddons/enhancers.js

因为它是一个高阶函数，所以您可以执行以下操作：

./src/store.js  

import { createStore } from 'redux'
import rootReducer from './reducer'
import { sayHiOnDispatch } from './exampleAddons/enhancers'


const ModifiedCreateStore = sayHiOnDispatch(createStore);
const ModifiedCreateStore2 = sayHiOnDispatch(ModifiedCreateStore);
const store = ModifiedCreateStore2(rootReducer, undefined, sayHiOnDispatch);

//const store = createStore(rootReducer, undefined, sayHiOnDispatch)
// say hi three times

export default store