前言
随着前端应用越来越复杂，我们需要使用大量的状态来维护应用的不同状态。而 Redux 作为一种数据状态管理库，可以让我们更加方便地管理应用状态，并且在多个组件之间共享数据。在 Redux 中，我们需要编写大量的 action 和 reducer，而 npm 包 brodux 则可以简化这一步骤，让我们更加快速地编写 Redux 代码。
安装
使用 npm 进行安装：
--- ------- ------ ------
使用
createStore
首先，我们需要使用 createStore 方法创建一个 store 并传入 reducer：
------ - ----------- - ---- ---------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------getState
我们可以使用 getState 方法获取当前的 state：
------------------------------ -- - ------ - -
dispatch
我们可以使用 dispatch 方法发送 action：
---------------- ----- ----------- --- ------------------------------ -- - ------ - - ---------------- ----- ----------- --- ------------------------------ -- - ------ - -
subscribe
我们可以使用 subscribe 方法监听 store 中 state 的变化：
------------------ -- - ------------------------------ -- ---------------- ----- ----------- --- -- - ------ - - ---------------- ----- ----------- --- -- - ------ - -
中间件
除了上面提到的基本使用，brodux 还支持中间件，在处理异步等操作时可以发挥很大的作用。
applyMiddleware
我们可以使用 applyMiddleware 方法来添加中间件：
------ - ------------ --------------- - ---- ---------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
-------- ----------------------- -
------ ------ -- -------- -- -
--------------------- -----------------
-------------
------------------ ----- ---------------- ------------------
--
-
----- ----- - -------------------- -----------------------------------在上面的例子中，我们定义了一个 loggerMiddleware，它会在 dispatch 时输出当前 action 的 type，以及在 dispatch 后输出当前 state。
自定义中间件
我们也可以根据需要编写自己的中间件，以下是一个简单的例子：
-------- ---------------------- -
------ ------ -- ----- -------- -- -
-- ------- ------ --- ----------- -
----- ---------------------- ----------------
- ---- -
-------------
-
--
-
----- ----------- - ---------- --------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
---------------------------- -- ------ ------在上面的例子中，我们定义了一个 asyncMiddleware，它可以处理异步 action，并将异步操作放在 setTimeout 内部实现。
总结
使用 brodux 可以让我们更加简单地编写 Redux 代码，并且支持中间件，提供了非常多的扩展能力。希望这篇文章对你有所帮助。完整示例代码如下：
------ - ------------ --------------- - ---- ---------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
-------- ----------------------- -
------ ------ -- -------- -- -
--------------------- -----------------
-------------
------------------ ----- ---------------- ------------------
--
-
-------- ---------------------- -
------ ------ -- ----- -------- -- -
-- ------- ------ --- ----------- -
----- ---------------------- ----------------
- ---- -
-------------
-
--
-
----- ----------- - ---------- --------- -- -
------------- -- -
---------- ----- ----------- ---
-- ------
--
----- ----- - ------------
--------
--------------------------------- ----------------
--
------------------------------
-- - ------ - -
------------------ -- -
------------------------------
---
---------------- ----- ----------- ---
-- -------- ---------
-- ----- ----- --------- - ------ - -
-- - ------ - -
---------------- ----- ----------- ---
-- -------- ---------
-- ----- ----- --------- - ------ - -
-- - ------ - -
----------------------------
-- -------- ---------- ------------
-- - ------ - -
-- -------- ---------
-- ----- ----- --------- - ------ - -
-- - ------ - -来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055bf881e8991b448d999c