1. 简介
redux-easy-connect 是一个可以简化 Redux 在 React 中使用的库。它可以自动将 Redux store 中的数据作为 props 传递给 React 组件，同时还提供了一种简单的方式来处理同步和异步数据获取。
本教程将介绍如何使用 redux-easy-connect。
2. 安装
要使用 redux-easy-connect，首先需要安装它。
npm install --save redux-easy-connect
3. 使用
3.1 配置
为了让 redux-easy-connect 能够使用，我们需要将其与 Redux 和 React 进行连接。我们可以手动创建 Redux store 并将其传递给 connect 方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------- - ---- ---------------------
----- ----- - -------------- ----- ------- ----
----- --- - -- -- -
------ ---------------- ---- ---- ----------
--
----- ---- - -------------
----------------
--------- --------------
----- --
------------
-------------------------------
--这里，我们使用 connect 方法将 App 组件连接到 Redux store。
3.2 访问 Store
一旦我们将组件连接到 Redux store，我们可以轻松地访问 store 中的数据。在组件中，我们可以像访问 props 一样访问 Redux store 中的数据：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------------------- ----- --- - -- ---- -- -- - ------ ------------------ -- ------ ------- ------------ ------- ------ -- -- ----- ----------------- ----
在上面的代码中，我们使用 connect 方法将 App 组件连接到 Redux store。我们还传递了一个函数，这个函数将从 store 中获取 data 并将其作为 data 的 prop 传递给 App 组件。
3.3 更新 Store
我们不仅可以从 Redux store 中获取数据，还可以将数据提交到 store 中，然后 store 会自动将其推送给所有与其连接的组件。
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------- - ---- ------------
----- --------------- - ------- -- -- ----- ---------- ---
----- ------------------ - ---------- -- -------------------- ------- -- ----------
----- --- - -- ----- ------- -- -- -
------ -
-----
------ ----------- ------------ ------------- -- ------------------------ --
------
--
--
------ ------- ------------ ---------------- --------------------在上面的代码中，我们首先使用 bindActionCreators 将 setData 作为 props 传递给 App 组件。然后我们在 App 组件中使用一个 input 元素，并将其值绑定到 Redux store 中的 data。当 input 的值发生变化时，我们将调用 setData 方法将新数据提交到 store 中。
3.4 异步获取数据
我们还可以使用 redux-easy-connect 来处理异步数据获取。我们可以将异步数据获取操作放在 componentDidMount 或其他生命周期方法中，然后使用 store.dispatch 方法将数据提交到 store 中。这样，我们就可以在组件中获取到异步数据。
-- -------------------- ---- -------
----- --------------- - ------- -- -- ------ ----------- ---
----- --- - -- ----- -- -- -
------ -
----
--------------- -- --- --------------------------------
-----
--
--
----- ------------ ------- --------- -
------------------- -
-------------------
-------------- -- ----------------
----------- -- -
----- - ------ ------ - - -----------
------------------------------
---
-
-------- -
----- - ---------- ---------- -------- - - -----------
------ ---------- ---------- ---
-
-
----- --------- - ------- -- --
----- -------------
-------- -----
---
------ ------- --------------------- -
---------- ----
--------- - ------ ------- --
-------- - --------- -
---在上面的代码中，我们首先定义了一个 mapStateToProps 函数，它将从 store 中获取 users 并将其作为 users prop 传递给 App 组件。
我们还定义了一个 AppContainer 组件，它将在 componentDidMount 中获取异步数据并将其提交到 store 中。在组件的 render 方法中，我们使用 props.component 将 App 组件渲染到屏幕上。
最后，我们使用 connect 方法将 AppContainer 组件连接到 Redux store。我们还通过 actions 选项为 loadUsers 方法创建了一个 action，并在 componentDidMount 中使用 store.dispatch 方法将异步数据提交到 store 中。
4. 结论
使用 redux-easy-connect，我们可以极大地简化 Redux 在 React 中的使用。它可以自动将 Redux store 中的数据作为 props 传递给 React 组件，并提供一种简单的方式来处理同步和异步数据获取。如果你正在使用 Redux 并希望简化其使用，那么 redux-easy-connect 是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664481e8991b448e254e