共计 2114 个字符，预计需要花费 6 分钟才能阅读完成。
先来个图说明下：
Redux 的设计就继承了 Flux 的架构，并将其完善，提供了多个 API 供开发者调用。借着 react-redux，可以很好的与 React 结合，开发组件化程度极高的现代 Web 应用。（PS: 本文笔者是废材，智商比较低 如有不当之处，敬请谅解。)
先说 store
Store — 数据存储中心，同时连接着 Actions 和 Views。一般创建是用 createStore 这个方法。createStore 的作用就是：创建一个 store 来管理 app 的状态，唯一改变状态的方式就是 dispatch 一个 action，最终返回一个 object。
作用：
1、Store 需要负责接收 Views 传来的 Action
2、然后，根据 Action 进行修改。（action 智障简单版本）
3、最后 Store 通知 views 进行改变也就是我们常用到 setState。
（ps: 说到 setState 就说下它原理吧）
setState(updater, callback)这个方法是用来告诉 react 组件数据有更新，有可能需要重新渲染。它是异步的，react 通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能，说到异步大佬们不用担心，里面还有个锁的。还有因为异步的原因，就会出现一个问题，就是你 setState 后马上拿是拿不到的。
如果有大佬想获取的话，可以简单粗暴的从 callback 中获取，也可以利用下 react 的生命周期，来看一波。如下图
其实在 react16 后是有改变的，传送门来一波：https://juejin.im/post/5b6f18… 这个写的不错。
看完 react 生命周期的大佬都知道用 componentDidUpdate 来获取数据了。
有些小可爱可能会说既然是异步的那么我来一波神仙操作：
这个就是刚才说的 setState 是有锁的，那个锁其实就是遇到这种神仙操作 react 会如下处理的。
也就是我最后会被最后的覆盖的。
说起我们每次修改完 Store 接收 action 通知后是怎么修改存数据的，这个就由 Reducer 来处理了。如下图
在一个 app 里，只能有一个 store，如果你想指明不同的 state 对应不同的 action，可以用 combineReducers 去合并不同的 reducer。
Reducer
这玩意的就是一个函数，有两个好处、
1、数据拆解
2、数据不可变（immutability）（ps: 如果数据大复杂需要什么撤销各种时也很显 Immutable api d 的传送门如下：https://juejin.im/entry/5992c…
这些写的一个简单的项目用到过这个东西，还不错。还有一个更轻量的玩意，传送门：https://juejin.im/post/5bf3fa…
react 有一个原则就是单项数据流，不像 vue 中的双向数据绑定。说起这个有个传送门给各位大佬的：https://cruyun.github.io/2018…
就是讲到双向 ng 的双向数据脏检测。
回到主题
因为是单向数据流，一旦数据多的话就会很头疼，祖先组件需要那些，父组件通过 props 传递一些数据给子组件，其实在渲染时候是构建了两颗树的 vd 树和组件树。说到 vd 就简答说下吧
React 的虚拟 Dom 和其 diff 算法，是 React 渲染效率远远高于传统 dom 操作渲染效率的主要原因。一方面，虚拟 Dom 的存在，使得在操作 Dom 时，不再直接操作页面 Dom，而是对虚拟 Dom 进行相关操作运算。再通过运算结果，结合 diff 算法，得出变更过的部分 Dom，进行局部更新。另一方面，当存在十分频繁的操作时，会进行操作的合并。直接在运算出最终状态之后才进行 Dom 的更新。从而大大提高 Dom 的渲染效率。
因为那个很复杂有兴趣可以看下 diff 吗，不过各位大佬都应该看过。
还是惯例传送门走起：https://juejin.im/post/5cb7ee…
其实嘛，想提高效率用 shouldComponentUpdate 这个函数还是有用的，这个
进行判断是否有必要进行对该组件进行更新（即，是否执行该组件 render 方法以及进行 diff 计算）
关于这个也有传送门
https://www.cnblogs.com/pengh…
上面说的好像被移除还是有问题，太久没写 react 了。。。所以没关注了。
Middleware
Redux 的中间件提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，换而言之，原本 view -> action -> reducer -> store 的数据流加上中间件后变成了 view -> action -> middleware -> reducer -> store，在这一环节我们可以做一些“神仙操作的”的操作。
http://www.ruanyifeng.com/blo…
其实可以看看这个
Provider 存在的意义在于：想通过 context 的方式将唯一的数据源 store 传递给任意想访问的子孙组件。
connect
Redux 中的 connect 方法，跟 Reflux.connect 方法有点类似，最主要的目的就是：让 Component 与 Store 进行关联，即 Store 的数据变化可以及时通知 Views 重新渲染。
