Redux 中如何对 Store 进行封装
Redux 是一个非常流行的用于构建可靠、可扩展 Web 应用程序的 JavaScript 库。大多数 Redux 应用程序都以 store 为中心，它负责存储应用程序的状态，以及对状态的修改和更新等操作。在大多数情况下，我们希望 store 能够被封装，以便更好地满足业务需求和保证应用程序的安全性。
在 Redux 中，每个 store 都必须遵循以下三个原则：
- 唯一数据源：整个应用程序的状态存储在一个单一的 store 中。这意味着无论哪个组件发生更改，整个 store 都会得到更新。
- State 只读：不能直接修改 store 中的状态，只能通过 dispatch 发起一个 action 来对 store 进行修改。
- Reducers 纯函数：reducers 是 pure function，即每次接收相同的输入时，输出必须相同，不得产生副作用。
为了更好地控制 store，我们可以对其进行封装，从而更好地保证应用程序的稳定性和安全性。
如何封装 Redux store？
首先，我们需要创建一个具有 get 和 set 方法的类，用于获取和设置 store 的状态。其次，我们还需要在原有的 reducer 函数的基础上添加一些新的功能，如记录状态变化日志、校验输入数据的正确性等等。最后，我们还需要在创建 store 时使用我们封装好的类。
下面是一个简单的示例代码，用于演示如何对 Redux store 进行封装：
-- ---- ----- -
----- -------- -
------------------ -
---------- - ------
-
-- -- ----- --
----- -
------ -----------
-
-- -- ----- ------------
------------- -
---------------- -------- ----------
---------- - ---------
-
-
-- ---- ------- --
-------- ----------------- - --- ------- -
------ ------------- -
---- -----------
----- ------- - -
--- -----------
-------- -----------------------
------------ ------
--
-- --------
-- ----------------------- --- --- -
------ ------
-
-- -----
----- ----- - ----------------------------
------ - --------- ----- --
---- --------------
----- ----- - -------------------- -- -
-- -------- --- ------------------ -
------ - -------- ------------ ----------------- --
-
------ -----
---
------ - --------- ----- --
--------
------ ------
-
-
-- -- ----- --
----- -------- - --- -----------
----- ----- - ------------
------- ------- -- -
----- -------- - ------------------ --------
-----------------------
------ ---------
--
- ------ -- -
--在上面的代码中，我们使用一个 AppState 类来封装 store 的状态。该类具有 get 和 set 方法，用于获取和设置 state 状态。在 set 方法中，我们还添加了一个日志功能，用于记录状态变化日志。此外，我们还对原有的 reducer 函数添加了一些新的功能，如校验数据的正确性等等。
最后，在创建 store 实例时，我们使用了新封装好的类，并将其存储在 appState 变量中。在 rootReducer 中，每次状态改变时，我们都会调用 appState.set 方法来记录状态变化日志。
结论
在 Redux 中对 store 进行封装可以更好地保证应用程序的稳定性和安全性。我们可以通过一个具有 get 和 set 方法的类来获取和设置 store 的状态。此外，我们还可以对原有的 reducer 函数添加一些新的功能，如记录状态变化日志、校验数据的正确性等等。最后，在创建 store 实例时，我们要使用新封装好的类，并将其存储在一个变量中，方便在 rootReducer 中调用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67208dd92e7021665e02c8c1