[英]Redux enhancer example
I am new to redux.我是 redux 的新手。 I would like know how I could create my own enhancer in redux.
我想知道如何在 redux 中创建自己的增强器。 I didn't find any example to create enhancer .
我没有找到任何创建增强器的示例。 To create enhancers, So what arguments do I need to pass and what do I need to return?
要创建增强器,那么我需要通过什么 arguments 以及我需要返回什么? Is there any rule on creating custom enhancer?
创建自定义增强器有什么规则吗?
In redux documentation about enhancer, found below two links (no sample or example code)在关于增强器的 redux 文档中,在以下两个链接中找到(没有示例或示例代码)
Redux documentation said that, Redux 文档说,
Middleware adds extra functionality to the Redux dispatch function;
中间件为 Redux 调度 function 添加了额外的功能; enhancers add extra functionality to the Redux store.
增强器为 Redux 存储添加了额外的功能。 ... A middleware which logs dispatched actions and the resulting new state.
... 一个中间件,它记录分派的动作和生成的新 state。 An enhancer which logs the time taken for the reducers to process each action.
一个增强器,它记录减速器处理每个动作所花费的时间。
So, I am not sure that custom middleware and custom enhancer coding rule are the same like below所以,我不确定自定义中间件和自定义增强器编码规则是否相同,如下所示
const loggerMiddleware = storeAPI => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', storeAPI.getState())
return result
}
So, my question is how to create custom enhancer?所以,我的问题是如何创建自定义增强器?
Here is the store enhancer interface 这是商店增强器界面
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
are high-order functions that take createStore
and return a new enhanced version of createStore
. enhancers
是采用createStore
并返回createStore
的新增强版本的高阶函数。 Take a look at this sample implementation.看看这个示例实现。
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
};
};
There is an example in 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.