Redux使用

Redux 和 Vuex 作用相同, 但比Vuex学习成本高

Redux 使用

1. 基本概念
2. 单项数据流
3. react-redux
4. 异步action
5. 中间件

基本概念

store state

单项数据流

1. dispatch(action)
2. reducer -> newState
3. subscribe 触发通知

react-redux

1. connect
2. connect
3. 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路由模式)

1. hash模式(默认), 如 #
2. H5 history模式
   后者需要server端支持

懒加载
Suspense, lazy

const Home = lazy(()=> import('./routes/Home'))

suspense 用于loading显示