简介
Redux是一个非常流行的JavaScript状态管理库。使用Redux可以帮助我们轻松地跨组件和页面共享状态。Redux的核心思想是将应用程序状态尽可能地分解为单个可预测的部分。
但是，有时候我们的状态树会变得相当大和复杂，导致难以维护和测试。Redux-split-reducer可以帮助我们解决这个问题。
Redux-split-reducer是一个Redux辅助库，它可以将一个单一的reducer函数拆分成多个小的reducer函数，每个小的reducer函数负责管理应用程序状态的一部分。这使得我们可以更好地组织我们的代码，并使状态树更加模块化和易于管理。
安装
Redux-split-reducer的安装非常简单：
npm install --save redux-split-reducer
使用
使用Redux-split-reducer是非常简单的。以下是一些使用示例：
Reducer 的创建
要使用Redux-split-reducer，您需要先将其导入到您的项目中，然后使用createSplitReducer函数来创建一个新的拆分reducer。
-- -------------------- ---- ------- ------ - ------------------ - ---- ---------------------- -- --- ----------- -------- ---- ------ --- ------ ------- -- --- --- ----- -------- ----------------- - --- ------- - ------ ------------- - ---- ----------- -- --- --- --- ---- -- --- ---- -- ----- ------ - --------- --------- ------------------- --------------- - -------- ------ ------ - - -- --- - -------- -- ------ --- ------- -- --- ----- ---- ---- ------- ------- -------- ------------------------ - ------ ----------- - ----- --------------- - -------------------- ----- ----------- -- - ----- ----------------- ---展开代码
将Reducer与Redux Store进行绑定
接下来，您需要将拆分的reducer与Redux Store进行绑定。这可以在使用Redux时一样，使用createStore函数进行绑定。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------------ - ---- ---------------------- -------- ----------------- - --- ------- - --- - -------- ------------------------ - ------ ----------- - -- ------ --- -------- ------- ---- ----------- --- ----------------- ----- --------------- - -------------------- ----- ----------- -- - ----- ----------------- --- -- ------ --- ----- ----- ---- --- --------------- ----- ----- - -----------------------------展开代码
现在，可以使用Redux Store的API进行状态管理，如dispatch、getState、subscribe等，无需担心拆分reducer将会产生什么影响。
通知Reducer处理异步action
Redux-split-reducer对于异步action的处理也是非常方便的，只需要在action触发之前通知Reducer开始处理新的action，并将handled值设为false即可。当异步操作完成并且相应的reducer完成更新操作后，请将handled值设为true以通知Redux-split-reducer：
-- -------------------- ---- ------- -------- ----------------- - --- ------- - ------ ------------- - ---- ----------------- ------ - --------- -------------------- ---- - ---- ------------------- ------ - --------- -------------------- ------ ------ -------------- - -------- ------ ------ - - -------- ------------------------ - ------ ----------- - ----- --------------- - -------------------- ----- ----------- -- - ----- ----------------- --- ---------------- ----- ----------------- -------- ----- --- -- ---- --- ----- --------- ---- ---------------- ----- ------------------- -------- --- -- --- -------- ---- ---展开代码
当handled为false时，Redux-split-reducer将拆分reducer视为正在处理异步操作。当handled为true时，Redux-split-reducer将重新渲染与管理拆分reducer的所有组件。
使用combineReducers规范的reducers
如果您使用Redux，那么您可能知道Redux提供了一个由多个reducer函数组成的combineReducers函数，用于将多个reducer函数组合成一个单一的reducer函数。您可以使用相同的函数将拆分reducer组合成一个还原为普通reducer的单一reducer函数：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ------------------ - ---- ---------------------- -------- ----------------- - --- ------- - --- - -------- ------------------------ - ------ ----------- - ----- --------------- - -------------------- ----- ----------- -- - ----- ----------------- --- ----- ----------- - --------------------------------- ----- ----- - -------------------------展开代码
结论
Redux-split-reducer是一个的有用的工具，可以帮助我们更好地组织我们的应用程序状态，并使状态树模块化和易于管理。您可以在Reducer处理的任何阶段拆分Reducer。但是，必须注意确保每个reducer在其所管理的状态下三倍的相对应状态。我希望您可以在编写重大且有复杂状态的应用程序时将其使用到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bcf
