React状态管理库Redux

使用Redux

Redux提供了模块化管理state的方法。Redux的教程经常让人感觉难以理解，但下面是一个最简的例子，仅关注它们之间的调用关系。

Redux有三个重要的概念，Action、Reducer和Store。Store是核心对象，在应用中是唯一的，提供了获取state、更新state等方法。当更新state，Redux需要调用具体的方法进行数据操作，这是Reducer的职责。Action用于告知Redux状态该如何变更。

图中，React Components指用户界面，当接收到事件触发数据更新，会先调用Action，Action通知Store要改变数据啦，然后Store让Reducers来进行具体的操作，最后将更新后的数据返回视图。

这是一个简单的Action文件：

action.js

Action确实就是普通的对象。下面是一个简单的Reducer：

reducer.js

state中有一个num属性，action中有一个num属性，如果type是ADD，则相加，并作为state的num返回。

在场景中使用Action和Reducer：

index.js

运行程序，可看到控制台有这样的输出：

一个简单的Redux实例只需为数不多的代码，虽然Redux是为处理复杂数据而生。

使用React-Redux

React-Redux是一个React库，Redux本身和React没有直接联系。

执行命令安装React-Redux：

React-Redux在理念上将所有组件分为两大类：UI组件和容器组件。UI组件就是React组件，容器组件则使用React-Redux提供的connect()方法生成。connect类似于高阶组件。

现在在上面实例代码的基础上使用React-Redux。首先导入需要的模块：

React-Redux只有两个API，connect和Provider。connect传入两个参数，每个参数都是对象类型。第一个参数用于将state转变为组件的props，可在组件中使用props.属性名调用；第二个参数用于将action绑定到props上，当组件监听到事件，会调用相应的action。

下面是实现代码：

这段代码和上面Redux的监听测试部分是相互独立的，就是开始监听到结束监听那一段。

React-Redux让Redux在React中的使用更加方便。