Redux 和 Vuex 作用相同, 但比Vuex学习成本高
Redux 使用
- 基本概念
- 单项数据流
- react-redux
- 异步action
- 中间件
基本概念
store state
单项数据流
- dispatch(action)
- reducer -> newState
- subscribe 触发通知
react-redux
- connect
- connect
- mapStateToProps / mapDispatchToProps
异步action
return 函数 包裹dispatch
在异步中发送dispatch(action)
=> 前提引用redux-thunk(redux-promise, redux-saga)
中间件
------ 一般情况 ------
button => callback => dispatch => action => reducer =(state)=> view
------ 中间件 -------
(在dispatch环节改造)
button => callback => mid1/mid2 =(action)> … => dispatch =(action)> reducer
(React-router路由模式)
- hash模式(默认), 如 #
- H5 history模式
后者需要server端支持
懒加载
Suspense, lazy
const Home = lazy(()=> import('./routes/Home'))
suspense 用于loading显示