Reduxable 是一个用于构建 Redux Store 以及管理 Store 中数据流转的 npm 包。 在前端开发中，Redux 已成为了不可避免的一部分。但是，Redux Store 的配置和管理却是一个很大的头疼问题。Reduxable 就是为了解决这个问题而产生的。 本文将详细介绍 Reduxable 的使用方法。
安装
首先，在终端中执行以下命令来安装 reduxable：
npm install --save reduxable
安装成功后，我们便可以开始使用 Reduxable 了。
创建 Store
在 Reduxable 中，我们可以通过 createStore 函数来创建 store。以下是一个简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- ------------
----- ------------ - -
------ -
--
----- -------------- - -- -- -- ----- ----------------- ---
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------
---------------------------------
------------------------------ -- - ------ - -首先，我们使用 createStore 函数来创建了一个 store，并将 reducer 作为参数传入，然后我们定义了一个初始化状态 initialState，并且定义了一个可以增加 count 的函数 incrementCount，最后在 reducer 中定义了如何处理 incrementCount 的 action。
接下来，我们将 incrementCount 这个 action 分发到 store 中。
最后，我们使用 store.getState() 函数来获取当前 store 中的状态。
创建 Slices
在 Reduxable 中，slice 是 Redux 状态树的一部分。就是某个 branch，代表了某个状态。我们可以通过 createSlice 来创建一个 slice。以下是一个简单的示例：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- ------------
----- ------------ - ---------------------- -
------------- - ------ - --
--------- -
--------------- ------- -- -
----------- -- --
--
--------------- ------- -- -
----------- -- --
--
----------- ------- -- -
----------- - --
-
-
---
----- ----- - ----------------------------------
------------------------------ -- - -------- - ------ - - -
------------------------------------------------------
------------------------------ -- - -------- - ------ - - -我们使用 createSlice 函数来创建了一个名为 counter 的 slice，并通过 initialState 参数定义了 count 初始值为 0，同时通过 reducers 参数定义了如何处理三个不同的 action。然后我们通过 createStore 函数来创建 store，并将 counterSlice.reducer 作为参数传入，并使用 store.getState() 函数获取当前 store 中的状态。
最后，我们分别将 incrementCount 和 decrementCount 这两个 action 分发到 store 中，然后再次使用 store.getState() 函数获取当前 store 中的状态。
createSelector
在 Reduxable 中，我们可以通过 createSelector 函数创建一个 selector。一个 selector 用于从 store 中获取数据。而且，它还支持使用在数据流中引入更多的数据。
以下是一个使用 createSelector 函数的示例：
-- -------------------- ---- -------
------ - ------------ ------------ -------------- - ---- ------------
----- ------------ - ---------------------- -
------------- - ------ - --
--------- -
---------- ------- -- -
----------- -- --
-
-
---
----- --------- - ------- -- --------------------
----- --------- - ------- -- ----------------------------
----- -------------- - ---------------
----------- -----------
------- ------ -- ----- - -----
--
----- ----- - ----------------------------------
-------------------------------------------------
---------------------------------------------- -- -在上述示例中，我们创建了一个 selector1 和 selector2，用于从 state 中选择出一个部分的值。然后，我们使用 createSelector 函数来创建了一个 selectCombined，该函数接收一个数组和一个回调函数作为参数，它会根据数组中的 selectors，将需要的值合并起来，并返回回调函数的值。最后，我们通过 console.log 来输出 selectCombined 中的数据。
总结
Reduxable 真的是一个非常方便的npm包，使用它，我们可以减少 Redux Store 的配置中的重复代码，简化 Store 的操作流程，提高开发效率。如果你正在寻找一个解决 Redux Store 配置过程中的繁琐的问题的方案，那么 Reduxable 就是值得一试的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d681e8991b448e02fc