如果你是一名前端开发人员，你一定会涉及到状态管理的问题。 在 React 中，Redux 是一种流行的状态管理库。其中的 State Container是一个非常有用的模块，可以让你更加灵活的控制 Redux 状态管理。
一、Redux 状态容器介绍
Redux State Container是一个开源npm包，它是一个辅助函数，可以帮助你更好地管理 Redux 中的状态。你可以把它看作是 Redux 的扩展。使用容器可以让你更方便地管理状态，提高代码可读性，减少代码耦合度和维护成本。
二、Redux State Container 使用方法
1.安装
npm install redux-state-container
2.在 Reducer 中使用
对于每个状态，我们都需要有一个关联的 Reducer 函数，Redux State Container 也是如此。 假设我们有一个名为“count”的状态需要管理，我们就需要创建一个名为“countReducer”的 Reducer，然后使用 State Container 对其进行包装并返回一个新的 Reducer。示例代码如下：
-- -------------------- ---- ------- -- ----- ----- --------- - - ------ -- -- -- -- ------- ----- ------------ - ------ - ---------- ------- -- - ------ ------------- - ---- ----------- ------ ------- ----------- - --- ---- ----------- ------ ------- ----------- - --- -------- ------ ------ - -- -- ------ ------- ------ ------- ---------------------------------展开代码
上述代码中 withStateContainer 方法可以对 Reducer 进行包装，返回新的 Reducer。
3.在组件中使用
使用 Redux 时，通常的做法是通过 react-redux 提供的 connect 函数将状态和 action 映射到组件的 props 中。但是这种方式在大型应用中容易出现代码耦合度过高的问题，而 Redux State Container 提供了另一种更加简洁的更优美的组织方式。
redux-state-container 提供了两个方法：
connect: 用于将组件连接到 Redux Store 中的状态容器，使 state 和 dispatch 作为 props 传递给组件。withReduxStateContainer: 用于将状态容器映射到组件中。
下面我们来看一下如何在组件中使用：
-- -------------------- ---- ------- ------ ------ ----------- ---- -------- ------ --------- ---- ------------------------ ----- ------- ------- --------- - ------------------ - ------------- - -------- - ----- ------- --------- --------- - ----------- ------ - ----- --------- ----------- ------- ------------------------------------ ------- ------------------------------------ ------ -- - - -- ----------- ----- ----------- - ----------------- -- -- ------ --- - --------- -- -- ------- ------------- --------- -- -- ------- ------------- --- ------ ------- ---------------------展开代码
通过调用 connect 方法，我们将状态容器连接到组件中，并将状态和 action 作为 props 传递给组件。所以在组件中通过 this.props.count, this.props.increase, this.props.decrease 获取状态值或触发 action。
4.使用中间件
在使用 Redux 时，我们通常会使用中间件解决有关异步操作等的问题。那么在使用 Redux State Container 时，如何使用中间件呢？其实直接在 createStore() 中加入你喜欢的中间件即可，和直接使用 Redux 一样。
下面的示例中，我们将 promiseMiddleware 中间件作为 Redux State Container 一部分引入，并在 asyncAction 函数中使用它。
-- -------------------- ---- ------- ------ ----------------- ------------ ---- ------------------------ ------ ----------------- ---- ---------------- ------ ------------ ---- -------------------------- ----- ----- - ------------------------- --- ------------------------------------ ----- ----------- - -- -- -------- -- - ------ --- --------------- -- - ------------- -- - --------------- ------------- ---------- -- ------ --- -- ------------------------------------- -- -------------------------------------展开代码
三、redux-state-container 的指导意义
通过使用 redux-state-container，我们可以更好的将计算状态和状态分离，避免在 reducer 中写太多的逻辑操作。使 reducer 只包含计算唯一的更新状态部分。从而使应用程序更易于理解和维护。
此外，在组件中，我们也可以更加轻松地通过 redux-state-container 连接状态和 action。从而提高代码的重用性和减少组件和 Redux Store 的耦合度。
因此，我们相信 redux-state-container 是一个非常有意义的 npm 包，它可以帮助开发人员更好地解决状态管理问题以及提高代码可读性、重用性和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005677981e8991b448e3df5
