In this blog we will talk about how an enhancer works and how it allows us to “create” a new Store Creator and "replace" the createStore function provided by Redux.
Store creator
As we know, we create a Store using the createStore function. This function takes a reducer as its first argument, and an initial state (optional) and an enhancer (also optional) as its second and third arguments, respectively. The createStore function returns a Store.
type StoreCreator = (reducer: Reducer, initialState?: State, enhancer?:Enhancer) => Store
What is an enhancer?
An enhancer is simply a higher-order function, this means that it can take functions as arguments or return a function. In this case, an enhancer takes the current StoreCreator as its argument and returns a new StoreCreator. We can represent it as follows:
type StoreEnhancer = (currentStoreCreator: StoreCreator) => StoreCreator
Let's create a dummy enhancer.
import { createStore } from "redux";
// the enhancer takes a CreateStore as argument
const dummyEnchancer = (createStore) => {
return (reducer, state, enhancer) => {
const store = createStore(reducer, state, enhancer)
// and return a new Store
return { ...store }
}
}
const store = createStore(rootReducer, undefined, dummyEnchancer);
In the example above, we can see that we can customize the StoreCreator function as we wish. The only rule is that we must return a new StoreCreator function, which will replace the one provided by Redux.
In summary:
- The enhancer must return a new Store Creator
- You can add any new functionalities to the Store Creator or the Store, as we will see later
- The new Store Creator must return a new Store
- Add the enhancer as the last parameter to the
createStorefunction
Examples:
1. Customize the store dispatch:
import { createStore } from "redux";
const greetEnhancer = (createStore) => {
return (reducer, state, enhancer) => {
// create a store
const store = createStore(reducer, state, enhancer)
// create a "Dispatch enhancer"
const newDispatch = (action) => {
const result = store.dispatch(action)
// add some logic after dispatch any action
console.log('Do something here :D')
return result
}
return {
...store
dispatch: newDispatch
}
}
}
const store = createStore(rootReducer, undefined, greetEnhancer);
In this example, we create a store and use its dispatcher inside a new one. This ensures that the action is dispatched and that we can add our own logic. Finally, we return the new StoreCreator, which provides a new store with the dispatcher we just created.
2. Customize the store reducer (source):
import { createStore } from "redux";
const monitorReducerEnhancer =
createStore => (reducer, initialState, enhancer) => {
// create an "Reducer enhancer"
const monitoredReducer = (state, action) => {
// add time measurement when using the store reducer
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 the new Store created using the new reducer
return createStore(monitoredReducer, initialState, enhancer)
}
const store = createStore(rootReducer, undefined, monitorReducerEnhancer);
In the above example, we create an enhancer that contains a "new reducer" which wraps the original reducer. This allows new logic to be executed each time the reducer is used. Finally, we return the new StoreCreator that creates a store which uses the monitoredReducer as the reducer.
Top comments (0)