三秒速成 Redux 神器增强器

Redux 中的 createStore 有三个参数，除了 state 和 reducer 之外，还有一个神秘的 enhancer，它是一个函数，可以用来增强 store 的功能。

1. Redux 神器增强器

Redux 神器增强器有两种类型：中间件和 store enhancer。

• 中间件：这是一个函数，它可以在 dispatch 一个 action 之前或之后做一些事情。最常见的中间件是 Redux Thunk 和 Redux Saga。
• store enhancer：它也是一个函数，但它不能在 dispatch 一个 action 之前或之后做一些事情。它只能在创建 store 时使用。最常见的 store enhancer 是 Redux DevTools。

2. 创建一个 store enhancer

创建 store enhancer 有两种方法：

• 使用 Redux Toolkit：Redux Toolkit 是一个官方的 Redux 工具包，它提供了很多有用的工具，其中就包括一个名为 createStoreEnhancer 的函数。

import { createStoreEnhancer } from '@reduxjs/toolkit';

const myEnhancer = createStoreEnhancer((next) => (reducer, initialState, enhancer) => {
  // 这里可以做一些事情

  return next(reducer, initialState, enhancer);
});

• 手动创建：也可以手动创建 store enhancer。

const myEnhancer = (next) => (reducer, initialState, enhancer) => {
  // 这里可以做一些事情

  return next(reducer, initialState, enhancer);
};

3. 使用 store enhancer

可以使用 createStore 函数来使用 store enhancer。

import { createStore } from 'redux';
import myEnhancer from './myEnhancer';

const store = createStore(reducer, initialState, myEnhancer);

4. store enhancer 的妙用

store enhancer 可以用来做很多事情，比如：

• 添加中间件
• 添加日志功能
• 添加性能监控功能
• 添加错误处理功能

5. 结语

Redux enhancer 是一个强大的工具，可以用来增强 Redux store 的功能。它有两种类型：中间件和 store enhancer。可以使用 Redux Toolkit 或手动创建 store enhancer。可以使用 createStore 函数来使用 store enhancer。