【九月打卡】第九天 【Redux 入门】实战项目架构设计

课程：React18 系统精讲

章节：redux

讲师：阿莱克斯刘

课程内容：

1. what?

• 实现全局数据共享

why？

• 组件间需要共享数据（state）

• 某个状态（state）需要在任何组件中使用

• 谋个组件可以改变另一个组件状态（state）的时候

how？

原理？

• 剥离组件数据（state）

• 数据统一存放在store中

• 组件订阅store获取数据

• store同步推送数据更新

即：redux统一保存数据，在隔离了数据与UI的同时，负责处理数据的绑定

1. 工作流程？

• store：有推送功能的仓库

• reducer：store修改数据的方法，可以初始化、修改、删除store中的状态

• action：数据更新的指令，告诉reducer如何处理数据

1. 创建数据仓库store，

2. reducer同时初始化store，

3. UI组件同时会订阅store

4. store向UI组件推送数据state，渲染UI

5. UI组件修改数据：

   1. 组件向store仓库dispacth分发action指令

   2. action指令会以事件驱动的方式被store截获

   3. store将当前的数据state和指令action传给reducer

   4. reducer更新数据，并向store中return新state

   5. store拿到新数据，向订阅者推送数据

   6. 组件拿到新数据，重新渲染UI