前言
在 React 的开发中，我们经常会用到 Redux 来管理应用状态。和 Redux 结合使用的一个常见库是 react-redux。其中的 connect 函数会根据传给它的一些参数，将 React 组件和 Redux 的 store 或者 action creator 关联起来，使组件能够从 store 中获取数据并且触发 action 来更新 store 中的数据。
但是，使用 connect 时我们需要手动传递一些参数，如 mapStateToProps 和 mapDispatchToProps。这样使得组件耦合了 Redux 的实现细节。而 redux-reconnect 就是为了解决这个问题而出现的。
redux-reconnect 可以让我们更好地封装组件的状态，使得状态只在组件内部被使用，从而使组件更加独立，更容易重用。如果你对 Redux 还没有完全掌握，可以先学习 Redux 的基本用法，再来看 redux-reconnect 的使用。
安装
可以通过 npm 安装 redux-reconnect：
npm install redux-reconnect
使用方法
redux-reconnect 可以用于生成两个高阶组件：connectAction 和 connectState。
connectAction
connectAction 用于封装某个组件的 action_creator。我们假设有一个组件，它的 action_creator 如下所示：
const increment = () => ({ type: "INCREMENT" });
const decrement = () => ({ type: "DECREMENT" });我们想要将这个 action_creator 封装为一个高阶函数，使得该组件可以通过 this.props.increment() 和 this.props.decrement() 直接调用，而无需传递 dispatch 函数或者绑定 this。可以这样使用 connectAction：
import { connectAction } from "redux-reconnect";
const actions = {
increment,
decrement,
};
const EnhancedComponent = connectAction(actions)(MyComponent);这里的 actions 是一个对象，key 值对应了传给组件的 props。MyComponent 的原始 props 中没有 increment 和 decrement，但是通过 connectAction，这两个方法会被添加到 props 中。
connectState
connectState 用于封装某个组件的 mapStateToProps 函数。我们假设有一个组件，它的 mapStateToProps 函数如下所示：
const mapStateToProps = (state) => ({
count: state.count,
});我们想要将这个 mapStateToProps 函数封装为一个高阶函数，使得该组件可以通过 this.props.count 直接获取 count 属性的值。可以这样使用 connectState：
import { connectState } from "redux-reconnect";
const stateProps = ({ count }) => ({
count,
});
const EnhancedComponent = connectState(stateProps)(MyComponent);这里的 stateProps 函数返回一个对象，该对象会注入到 MyComponent 的 props 中。
示例代码
接下来，我们将演示如何使用 redux-reconnect 将一个计数器组件封装起来。完整的代码可以在 GitHub 上找到。
首先，我们需要创建一个 Redux store。在这个例子中，我们使用 Redux Toolkit 来简化创建和管理 Redux store 的流程。
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ----------------
--------
---接下来，我们定义一个计数器组件。该组件使用 connectAction 和 connectState 来访问 store 中的状态和 dispatch 方法。
-- -------------------- ---- -------
------ - -------------- ------------ - ---- ------------------
----- ------- - -- ------ ---------- --------- -- -- -
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
--
----- ------- - -
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
----- ---------- - -- ----- -- -- --
------
---
------ ------- ----------------------------------------------------------这里我们传递两个参数，一个是 action 对象，另一个是 stateProps 函数。通过调用 connectState 和 connectAction 函数，我们获得了一个新的组件：connectState(stateProps)(connectAction(actions)(Counter))。
最后，我们将 store 和组件传递给 Redux Provider。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ------- ---- ------------
------ ----- ---- ----------
----------------
--------- --------------
-------- --
------------
-------------------------------
--现在，我们可以在浏览器中看到计数器组件，并修改 store 中的状态了。
结语
redux-reconnect 使得我们可以更加方便地封装组件的状态和 action creator。通过使用 redux-reconnect，我们可以降低代码的耦合性，便于重用，并且使得我们的组件更加聚焦于问题本身。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671c81e8991b448e378a