你不知道的Redux图集

前言

为什么要用Redux

当我们在两个没有父子关系的组件传递数据时,就需要Redux能够管理我们的数据状态,使得这两个组件数据可以通信

Redux flow

1.Components are given callback functions as props, which they call whenever a UI event happens.
2.Those callbacks create and dispatch actions based on the event.
3.Reducers process the actions, computing the new state.
4.The new state of the whole application goes into a single store.
5.Components receive the new state as props and re-render themselves where needed.

自己翻译哒
1.组件可以抛出一个函数,当UI events发生时函数被调用
2.这个函数里创建并抛出了action
3.reducer处理("接住")了这个action,并更新state
4.这个 更新后的state 会放到store中
5,这样,组件就可以从store中获取到新的state作为props,触发页面重新渲染

1.redux整体图

体现了单向数据流:

在没有中间件的时候，Redux是这样的：
Component calls action creator/dispatches action,reducer receive actions,then handle and create new state,finally send state to component

2.Middleware

Middleware的作用：
可以利用superagent向服务器发送请求，并抛出一个action,让reducer接这个action

Middleware的作用

添加Middleware后

只讲知识不写demo，是耍流氓，
举个例子说明Middleware的用法

！！！

3.state tree

state tree

所以在state tree上，component dispatch（发布）出去action到store中，store subscribe（订阅）state是否更新
4.Redux的三大原则

three principles

每天都努力一点
谢谢你看完

---