Redux 中间件

1、什么是中间件

正如 Redux 文档所描述的,中间件是在派遣 action 和它抵达 reducer 的时间点之间的第三方扩展点。

中间件 和 Redux

你已经知道,单向数据流使 reducer 应用具有可预测性:为了改变 store 的状态,action 描述更改必须被派发到 reducer。然后 reducer 依次返回新的状态。

在派发 action 和 reducer 之间,我们可以引入一种叫做中间件的软件在 action 抵达 reducer 之前来拦截它。正如 Redux 文档/ 所描述的,你可以将中间件看做:

…是在派发 action 和它抵达 reducer 的时间点之间的第三方扩展。

中间件收到该 action 后,它可以执行大量的操作,包括:

  • 产生副作用(例如记录状态)
  • 自己处理 action(例如发出异步 HTTP 请求)
  • 重定向该 action(例如重定向到另一个中间件)
  • 在派发期间运行一些代码
  • 派发追加的 action

...它在将 action 传递给 reducer 之前执行所有这些操作!

中间件总结

中间件可以采用与 Redux 相同的单向状态管理模式,特别是中间件可以在派遣的 action 抵达 reducer 之前拦截它,然后重定向该 action 或产生副作用。

我们将在下个部分详细讲解一个副作用,使用 logger 中间件向控制台输出有价值的信息。

更多资料

2.使用中间件

中间件位于 Redux应用的哪个位置?

还记得createStore() 方法用来创建 Redux store。除了传入reducer(经常是组合的“根 reducer”),createStore() 还可以接受可选 enhancer参数!以下是 createStore()的方法签名:

store.createStore(reducer, [preloadedState], [enhancer])

Redux 为我们提供了 applyMiddleware()函数,我可以将其用作enhancer 函数的参数。applyMiddleware()可以根据需要接受多个参数,我们可以在一个应用中使用多个中间件。我们看看具体代码,从logger 中间件开始!

示例:logger 中间件

Redux 是Web应用的“可预测状态容器”。当 action 被派遣时,我们希望看到新的状态被处理和保存(例如,状态不能自己更新,外部资源也不能直接写入状态)。如果能记录发生在应用中的每个 action,以及其变化前后的状态,岂不是很棒?

我们可以应用“logger”中间件来实现这一点!logger 会产生以下副作用:输出 reducer 处理 action 前后的 store 的状态

我们来了解下吧!

💡 redux-logger npm 软件包💡

在上个视频中,我们使用了自定义 logger 将 store 的状态输出到控制台中。你也可以参阅 redux-logger,了解这个预构建的日志工具。安装指令:

npm install --save redux-logger

redux-logger 自带默认选项,但是你也可以根据需要添加其他自定义内容

总结

我们要在 Redux 应用的一个中心位置(创建 store 时)应用中间件。createStore() 方法必须获取 reducer 参数,但是我们也可以传入可选 enhancer 参数。该参数是 Redux 的 applyMiddleware() 函数,它可以接受中间件本身的多个实例。

更多资料

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容