git clone https://github.com/xuchaobei/react-redux-demo
01 React
项目创建
JSX
组件
纯函数
函数组件和类组件(列表中的key)
函数组件不需要render
组件内部的可变状态
render函数中间不能有副作用代码
state
- 部分修改,而非全量修改
Props vs State
受控组件
非受控组件
React hooks
State Hook
Effect Hook
git checkout effect-hooks
自定义hooks
git checkout custom-hooks
规则
Why Hooks
- 状态管理逻辑封装与复用
- 面向React未来(类组件)
02 React Router
路由分类
- 服务端路由
- 客户端路由
基础示例
Router
- BrowserRouter
- HashRouter
Route
Switch
路由跳转
Hooks API
继承React Router
03 Redux (RTK)
Redux 是什么?
- state
- view
- action
什么时候用Redux
- 直接使用localstorage进行数据共享会有什么问题?
Redux术语
Store
Action
- Dispatch发送一个Action
- Reducer: 根据当前的应用状态,和接收到的action,计算新的状态
Redux数据流
Redux Toolkit(RTK)
创建store
创建slice模块
slice示例
slice使用
同步数据流完整示例
异步数据流完整示例
- 放在extraReducers中的
创建文章
redux-async
-
AddPost1
-
AddPost2
文章详情页
像设计数据库一样设计Redux状态
不应该在redux做服务端的状态管理
其他状态管理方案
- 低代码平台的状态放在redux里面