Redux原理形象说明与Redux中间件简述

Redux原理图示

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。

Redux = Reducer + Flux

无状态组件

当组件只有一个render()函数的时候，可以只返回一个函数，不需要再定义class类了，我们就可以用一个无状态组件来定义这个组件。其实无状态组件就是一个函数，同时这个函数会接收一个props，也就是父组件传递过来的内容，此时可以直接用props而不是this.props。由于普通的组件不仅要执行生命周期函数还要执行render(),而无状态组件只需要执行本函数就可以了，所以使用无状态组件可以提高性能。

一般来说，UI组件可以用无状态组件。

---

Redux-thunk中间件

redux-thunk是在 action 和 store 中间的一个中间件，它实际上就是做了一个对dispatch函数的封装和升级，最原始的dispatch函数在接收到一个对象之后会把这个对象传递给store，而通过redux-thunk升级的dispatch函数会根据接收不同而执行不同的操作，如果接收到一个对象，那就直接把这对象传递给store，如果接收到一个函数，那就先执行这个函数，之后需要调用store的时候再调用store。

使用redux-thunk的目的是可以在action里去写异步的代码【之前的action只能是一个对象，而使用了redux-thunk中间件之后，action也可以是一个函数了，可以使用store.dispatch（action）把这个函数发送给store了。之后store会自动执行这一段函数，而这一段函数对应的内容定义在actionCreators中，它返回一个axios请求，先取json的数据，然后获取数据，接下来继续走redux的流程 <先创建一个action调用initListAction，然后调用store.dispatch方法，其中的store.dispatch方法通过return（dispatch）接收到dispatch方法，故而直接使用dispatcch(action)即可> 来改变store的数据】

使用redux-thunk的好处：如果把异步函数放在组件的生命周期函数中去写，这个生命周期函数可能会变得越来越复杂，组件会变得越来越大。所以借助redux-thunk来把这些复杂的业务逻辑或者异步函数拆分到一个地方去管理，带来的好处就是当去做自动化测试的时候会很简单。

整个流程：ui组件触发action创建函数 ---> action创建函数返回一个action ------> action被传入redux中间件(被 saga等中间件处理) ，产生新的action，传入reducer-------> reducer把数据传给ui组件显示 -----> mapStateToProps ------> ui组件显示

---

Redux-saga中间件

（详见：https://www.jianshu.com/p/6f96bdaaea22）

概述：redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。

这意味着应用的逻辑会存在两个地方

(1) reducer负责处理action的stage更新

(2) sagas负责协调那些复杂或者异步的操作

Redux-Saga特点：

sagas是通过generator函数来创建的

sagas可以被看作是在后台运行的进程。sagas监听发起的action，然后决定基于这个action来做什么 (比如：是发起一个异步请求，还是发起其他的action到store，还是调用其他的sagas 等 )

在redux-saga的世界里，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 )

Effects 都是简单的 javascript对象，包含了要被 saga middleware 执行的信息

redux-saga 为各项任务提供了各种 （ Effects创建器 )

因为使用了generator函数，redux-saga让你可以用 同步的方式来写异步代码

redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects放到 race 方法里以自动取消

---

React-redux

（详见：https://www.cnblogs.com/xcsun/p/9146342.html）

方便我们在React中使用redux