通俗易懂的理解 Redux(知乎)

1.  React有props和state: props意味着父级分发下来的属性【父组件的state传递给子组件  子组件使用props获取】，state意味着组件内部能够自行管理的状态，而且整个React没有数据向上回溯的能力，也就是说数据只能单向向下分发，或者自行内部消化。
理解这个是理解React和Redux的前提。
2. 通常构建的React组件内部多是一个完整的应用，它本身工做良好，你能够经过属性做为API控制它。可是更多的时候发现React根本没法让两个组件互相交流，使用对方的数据。
而后这时候不经过DOM沟通（也就是React体制内）解决的惟一办法就是提高state，将state放到共有的父组件中来管理，再做为props分发回子组件。
3. 子组件改变父组件state的办法只能是经过onClick触发父组件声明好的回调，也就是父组件提早声明好函数或方法做为契约描述本身的state将如何变化，再将它一样做为属性交给子组件使用。
这样就出现了一个模式：数据老是单向从顶层向下分发的，可是只有子组件回调在概念上能够回到state顶层影响数据。这样state必定程度上是响应式的。
4. 为了面临全部可能的扩展问题，最容易想到的办法就是把全部state集中放到全部组件顶层，而后分发给全部组件。
5. 为了有更好的state管理，就须要一个库来做为更专业的顶层state分发给全部React应用，这就是Redux。让咱们回来看看重现上面结构的需求：
a. 须要回调通知state (等同于回调参数) -> action
b. 须要根据回调处理 (等同于父级方法) -> reducer
c. 须要state (等同于总状态) -> store
对Redux来讲只有这三个要素：
a. action是纯声明式的数据结构，只提供事件的全部要素，不提供逻辑。
b. reducer是一个匹配函数，action的发送是全局的：全部的reducer均可以捕捉到并匹配与本身相关与否，相关就拿走action中的要素进行逻辑处理，修改store中的状态，不相关就不对state作处理原样返回。
c. store负责存储状态并能够被react api回调，发布action.
固然通常不会直接把两个库拿来用，还有一个binding叫react-redux, 提供一个Provider和connect。不少人其实看懂了redux卡在这里。
a. Provider是一个普通组件，能够做为顶层app的分发点，它只须要store属性就能够了。它会将state分发给全部被connect的组件，无论它在哪里，被嵌套多少层。
b. connect是真正的重点，它是一个科里化函数，意思是先接受两个参数（数据绑定mapStateToProps和事件绑定mapDispatchToProps），再接受一个参数（将要绑定的组件自己）：
mapStateToProps：构建好Redux系统的时候，它会被自动初始化，可是你的React组件并不知道它的存在，所以你须要分拣出你须要的Redux状态，因此你须要绑定一个函数，它的参数是state，简单返回你关心的几个值。
mapDispatchToProps：声明好的action做为回调，也能够被注入到组件里，就是经过这个函数，它的参数是dispatch，经过redux的辅助方法bindActionCreator绑定全部action以及参数的dispatch，就能够做为属性在组件里面做为函数简单使用了，不须要手动dispatch。这个mapDispatchToProps是可选的，若是不传这个参数redux会简单把dispatch做为属性注入给组件，能够手动当作store.dispatch使用。这也是为何要科里化的缘由。

作好以上流程Redux和React就能够工做了。简单地说就是：
1.顶层分发状态，让React组件被动地渲染。
2.监听事件，事件有权利回到全部状态顶层影响状态。

 

 

附送一些 Redux 的基础概念：

1. Redux 的核心是一个 store。
2. store 是一个 JavaScript 对象，经过 Redux 提供的 createStore(reducers) 方法建立。
3. store 有两个核心方法： .getState() 和 .dispatch()。
4. .getState() 返回一个 JavaScript 对象，表明 store 当前的状态。
5. .dispatch() 接受一个 action 做为参数，将这个 action 分发给全部订阅了更新的 reducer。
6. action 是一个 JavaScript 对象，一般包含了 type、payload 等字段，用于描述发生的事件及相关信息（使用 Redux 中间件可让你 dispatch 其它类型的 action，此处不展开）。
7. reducer 是一个 JavaScript 函数，函数签名为 (previousState, action) => newState，即接受 previousState 和 action 两个参数，根据 action 中携带的信息对 previousState 作出相应的处理，并返回一个新的 state。