Redux
1. 安装Redux
yarn add redux
2. 分析Redux原理图
- 对于整个Redux原理图,可以理解为点餐流程,React Component是顾客,Action Creations是服务员,Store是专门负责将菜单录入点餐系统通知后厨的录入人员,Reducers是点餐系统。
- 顾客按照菜单格式,勾选菜单上的菜品以及数量(创建Action),然后将菜单给服务员,服务员把菜单交给录入人员(发送Action),录入人员将菜单录入点餐系统(交给Reducer),点餐系统录入菜单后结合之前已点的菜的价格显示总价格和需要等待的时间,顾客如果想要得知当前菜单总价格可以找录入人员
- React Component只需要创建Action用于封装此次要干的事件内容,并将Action 分发给Store,Store将当前接收的Action,以及上一次Action作用的结果一起发送给Reducer,Reducer拿到Action和上次Action作用的结果,进行具体的逻辑操作,并将当前Action的处理结果反馈给Store,React Component通过Store得知当前Action的作用结果
Redux-Thunk
同步Action和异步Action
- 同步action的返回值必须是一个对象
- 异步action的返回值是一个函数,如果想要store能够执行异步action,也就是执行异步action的方法,则需要安装redux-thunk中间件
- 异步action一般都会调用同步action,期间只是为了等待一个ajax请求的回调或者一个定时器,所以异步action的形参会接收到一个store的dispatch,不需要通过store调用dispatch,action是组件自身传递给store的,action自身不引入store
React-Redux
|