什么是 Redux 绑定
Redux 是一个 JavaScript 应用程序状态管理库，它使用单项数据流来管理应用程序状态。它的核心概念是 Store、Action 和 Reducer。
在使用 Redux 的过程中，我们需要写很多的模板代码来将 Component 与 Redux 的 Store 进行连接。这些模板代码包括了 mapStateToProps、mapDispatchToProps、connect 等等。这些代码虽然是必需的，但是我们总是会感觉这些代码会让我们的代码变得臃肿、不易维护。
Redux 绑定就是一个帮助我们解决这个问题的库。它能够帮助我们更简单地连接 Component 和 Store。
react-redux-binding
react-redux-binding 就是一个 Redux 绑定库。它专为 React 设计，并具有以下特点：
- 自动化：无需手动编写 mapStateToProps、mapDispatchToProps、connect 等等，react-redux-binding 这些绑定逻辑会自动完成。
- 简化：react-redux-binding 的设计思路就是尽可能的减少重复、简化代码。
- 声明式：使用声明式语法来定义 Component 和 Store 之间的绑定。
- 灵活：可以根据自己的需求自由的配置和扩展绑定逻辑。
下面我们来看一下 react-redux-binding 的基本使用方法。
安装
首先我们需要安装 react-redux-binding：
npm install react-redux-binding --save
使用
使用 react-redux-binding 很简单，只需要按照以下步骤即可：
- 定义 Component 和 Store 的结构（schema）
const schema = {
counter: {
count: 0,
increment: () => {},
decrement: () => {},
},
};在这个 schema 中，我们定义了一个 counter 对象，这个对象包含了一个 count 值和两个方法：increment 和 decrement。这个 schema 在 react-redux-binding 中用于定义各种绑定逻辑。
- 使用 connect 绑定 Component 和 Store
-- -------------------- ---- -------
------ - ------- - ---- ----------------------
----- ------- - -- ------ ---------- --------- -- -- -
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
--
----- ---------------- - --------------- -- ------- -- -- --
------ --------------
---------- ------------------
---------- ------------------
-------------
------ ------- -----------------上面的代码是一个简单的计数器 Component，我们在其中使用了 connect 方法来将 Component 和 Store 进行绑定。
在 connect 中，我们传递了两个参数：
- schema: 定义了 Component 和 Store 的结构。
- mapStateToProps: 定义了将 Store 的属性绑定到 Component 中的方法，我们在其中将通过 schema 定义的 counter.count 属性绑定到了我们的组件里。
在 connect 方法调用完成之后，我们得到了一个新的经过绑定的 Counter 组件。
react-redux-binding 的深度和学习指导
react-redux-binding 虽然使用起来很简单，但是它的实现非常复杂，其中涉及了很多的设计和技巧。如果你想更深入的学习 react-redux-binding，可以从以下几个方面着手：
熟练掌握 React 和 Redux 的基础知识，包括 JSX、Component 生命周期、Redux 数据流等等。只有掌握了这些基础知识，才能更好的理解 react-redux-binding 的工作。
深入研究 react-redux-binding 的源码，了解其实现方式和设计思路。react-redux-binding 的源码非常精简和优美，通过阅读源码可以更好的理解其背后的设计和技巧。
实践练习，将 react-redux-binding 应用于实际项目开发中，从中总结经验和技巧。只有实际的练习才能更好的理解 react-redux-binding 的实战应用。
示例代码
最后，让我们来看一下完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - ------- - ---- ----------------------
----- ------ - -
-------- -
------ --
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
--
----- ------- - -- ------ ---------- --------- -- -- -
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
--
----- ---------------- - --------------- -- ------- -- -- --
------ --------------
---------- ------------------
---------- ------------------
-------------
----- ------- - ------ - - -------- - ------ - - -- ------- -- -
------ ------------- -
---- ------------
------ -
---------
-------- -
-----------------
------ ------------------- - --
--
--
---- ------------
------ -
---------
-------- -
-----------------
------ ------------------- - --
--
--
--------
------ ------
-
--
----- ----- - ---------------------
----- --- - -- -- -
------ -
--------- --------------
----------------- --
-----------
--
--
------ ------- ----在这个示例代码中，我们定义了一个计数器 Component，并将其与 Store 进行了绑定。在 bind 的过程中，我们使用了 react-redux-binding 定义了两个绑定方法：increment 和 decrement，它们分别对应 Store 中的两个 action。
通过使用 react-redux-binding，我们可以避免繁琐的 mapDispatchToProps、mapStateToProps 等等模板代码，使得我们的代码更加的清晰简洁。同时，我们也可以更专注于解决问题，而不是在编写重复代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe960795b1f8cacdd52c08