react+redux工作流程
来源:互联网 发布:卖好看的书包的淘宝店 编辑:程序博客网 时间:2024/06/06 01:01
上图:
可见整个redux流程的逻辑非常清晰,数据流是单向循环的,就像一个生产的流水线:
store(存放状态) -> container(显示状态) -> reducer (处理动作)-> store
这一点对精细化分工协作很有好处。
我们来看看这三个概念:
store 是应用的状态管理中心,保存着是应用的状态(state),当收到状态的更新时,会触发视觉组件进行更新。
container 是视觉组件的容器,负责把传入的状态变量渲染成视觉组件,在浏览器显示出来。
reducer 是动作(action)的处理中心, 负责处理各种动作并产生新的状态(state),返回给store。
NOTE:从对象的包含关系上讲,reducer 是store的一部分,但在逻辑上我们把它分出来,这样会比较容易理解整个redux流程。
我们可以做个形象的比喻,把 js 比喻成巴士,把 store, container, reducer 比喻为三个车站,再把 state 和 action 比喻成两种乘客。这是一趟环路巴士:
js巴士 从 store车站 出发,载上 state乘客 ,state乘客 到达某个 container车站 下车并把自己展示出来
过了一会,有一个 action乘客 上车了,js巴士 把 action乘客 送到 reducer车站,在这里 action乘客 和 state乘客 生了一个孩子 new state,js巴士把 new state 送回了 store车站(好像是人生轮回)
redux 只是定义了应用的数据流程,只解决了 “数据层”(model layer) 的问题,一般还会使用 react, angular 等作为“显示层” (UI layer) 来一起使用。
- react+redux工作流程
- react-redux的工作流程理解
- react+redux 前端开发流程
- react+redux+react-redux
- redux 在 React-Native 工作中的使用
- 【React】React+Redux+Ajax 点餐项目 完整流程【一】
- 【React】React+Redux+Ajax 点餐项目 完整流程【二】
- redux react-redux
- Redux(三: React-Redux)
- react-redux
- React + Redux
- React&Redux
- react-redux
- React Redux
- react-redux
- react-redux
- React-Redux
- React Redux
- 属性字符串
- 数据库中实现权全表更新替换
- 防盗链 原理 方法
- MD5 + BASE64加密 对音频部分md5两次
- 外部碎片和内部碎片的区别以及管理方式
- react+redux工作流程
- 用 keychain 永久存储
- 高并发接口压测
- Java变量的初始化问题探究
- javaweb分层思想
- unity改变物体大小的两种方式
- spring-boot笔记-静态资源及页面开发(六)
- 对于ECharts3.0迁徙图的部分配置记录
- 数组中出现次数超过一半的数字