简介
在前端开发中，使用Redux管理应用程序状态已经成为了主流的方式。Redux库提供了一系列的API来方便地管理状态，但在开发过程中也存在一些问题，例如难以快速检查状态的改变、无法轻松地查看状态的中间状态等等。为了解决这些问题，可以使用 redux-blabber npm包。
redux-blabber是一个React和Redux开发工具，通过提供一个简单的高阶Redux预处理器，可以在开发过程中记录Redux状态的每个过渡，从而使得开发调试更简单，更容易追踪Redux状态的改变。
安装
使用npm安装redux-blabber:
npm install redux-blabber --save-dev
使用示例
在使用redux-blabber之前，需要先创建一个基本的Redux应用程序，具体可以参考Redux的文档。
接下来，我们来看看如何在应用程序中使用redux-blabber。
首先，需要在Redux的store上应用redux-blabber:
import { createStore, applyMiddleware } from 'redux';
import blabber from 'redux-blabber';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(blabber),
);然后，在组件中使用react-redux的 connect 函数来将state和action作为props注入组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
----- ----------- - -- ------ -------- -- -- -
-----
--------------------
------- ----------- -- ------------------------------
------
--
--------------------- - -
------ ----------------------------
--------- --------------------------
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - ---------- -- --
--------- -- -- ---------- ----- ----------- ---
---
------ ------- --------
----------------
-------------------
---------------最后，在开发阶段，打开Redux DevTools，即可看到 redux-blabber 注入并记录的状态的中间状态。
API
redux-blabber提供了以下API：
blabber(options)
该API是 applyMiddleware 的高阶函数。options 对象包括以下属性：
filter: [string] 或 [函数]，玄学过滤器，决定要不要捕捉state
parser: [函数]，转换和格式化 state 在被日志记录前处于的形式
logger: [函数]，即将把完整生命周期的
every event打印出来
结论
在使用redux-blabber之后，可以更容易地监听应用程序状态的变化。通过生成的记录，可以在调试和开发过程中更深入地分析状态的变化。虽然 redux-blabber 不能直接解决问题，但是它可以帮助开发者快速识别状态更改并在开发过程中提高生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b4581e8991b448e5461