前言
在前端开发中，使用数据驱动开发是非常常见的方法。而 Redux 是一个非常流行的 JavaScript 库，它提供了一种数据流的管理方式，方便我们进行状态的管理和操作。但是，经常会出现数据在 Redux 中操作了，但是并没有同步到视图上的情况，这时候需要进行双向绑定。
本文介绍一个可以实现 Redux 中数据的双向绑定的 npm 包：redux-2way-binding。接下来，我们将详细介绍这个包的使用方法。
安装
首先，你需要安装 redux-2way-binding 包。可以在终端中输入以下代码进行安装：
npm install redux-2way-binding --save-dev
安装完成后，在你的项目中引入：
import createBindingMiddleware from 'redux-2way-binding';
使用方法
redux-2way-binding 可以通过 middleware 的方式来使用。首先，让我们来创建一个 Redux store：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ ----------------------- ---- ---------------------
----- ------- - -----------------
---- ------ - --- ------- -- -
------ ------------- -
---- -------------
------ ---------------
--------
------ ------
-
--
---- ------ - --- ------- -- -
------ ------------- -
---- -------------
------ ---------------
--------
------ ------
-
--
---
----- ----- - -------------------- ----------------
-------------------------
---- -
----- --------
-------- -
-
----- -------------
--------- --------
--
--
--
---- -
----- -------
-------- -
-
----- -------------
--------- ------------
--
--
--
---
---这里我们新建了一个包含两个 reducer 的 store。接下来我们通过创建 middleware 来实现双向绑定。在创建 middleware 时，我们需要提供一个对象，对象的属性是每个需要绑定的字段，值是一个对象，包含类型和绑定操作。
-- -------------------- ---- -------
-------------------------
---- -
----- --------
-------- -
-
----- -------------
--------- --------
--
--
--
---- -
----- -------
-------- -
-
----- -------------
--------- ------------
--
--
--
--在这个例子中，我们创建了两个绑定操作：
foo绑定到了 input 标签的 value 属性，当这个 input 的值改变时，Redux store 里的 foo 也会跟着改变，反之亦然。bar绑定到了某个 div 的 innerHTML 属性，当 Redux store 里的 bar 的值改变时，这个 div 的 innerHTML 也会跟着改变，反之亦然。
示例代码
最后，我们给出一个完整的展示双向绑定的例子。
-- -------------------- ---- -------
--------- -----
------
------
------------ ----- ------- ---------------
-------
------
------ ----------- ---------- --
---- ------------------
------- ------------------------------------------------------
------- ---------------------------------------------------------------
--------
----- - ------------ ---------------- --------------- - - ------
----- - ----------------------- - - -----------------
----- ------- - -----------------
---------- ------ - --- ------- -- -
------ ------------- -
---- ---------------
------ ---------------
--------
------ ------
-
--
----------- ------ - --- ------- -- -
------ ------------- -
---- ----------------
------ ---------------
--------
------ ------
-
--
---
----- ----- - ------------
--------
----------------
-------------------------
---------- -
----- --------
-------- -
-
----- ---------------
--------- --------
--
--
--
----------- -
----- -------
-------- -
-
----- ----------------
--------- ------------
--
--
--
---
-
--
----- ----- - ---------------------------------
----- ------ - ----------------------------------
------------------------------- ----- -- -
----------------
----- ---------------
-------- -----------------
---
---
------------------ -- -
----- ----- - -----------------
---------------- - ----------------
---
---------
-------
-------在这个例子中，我们绑定了一个输入框和一个 div 元素。当输入框的值改变时，这个值会同步到 Redux store 里，并更新到 div 上；当 Redux store 里的 outputText 改变时，这个值也会更新到 div 上。
结尾
通过阅读本文，你已经了解了如何使用 Redux 2-Way Binding 包来实现 Redux 中数据的双向绑定。这个简单又实用的包可以帮助我们更好的处理前端数据流，提高开发效率。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bb6