跳到主要内容

Redux

API

Redux Toolkit & Redux

分类	Redux Toolkit	Redux
Store	configureStore()	createStore()
Middleware	getDefaultMiddleware()	applyMiddleware()
`\-`	-	compose()
Reducer	-	combineReducers()
Action	-	bindActionCreators()
`\-切面`	createSlice()	-
`\-Reducer`	createReducer()	-
`\-Action`	createAction()	-
`\-Thunk`	createAsyncThunk()	-
`\-`	createEntityAdapter()	-
`immer`	createNextState()	-
`\-`	current()	-
`nanoid`	nanoid()	-

React Redux

分类	Hooks	Classes
连接	`<Provider>`	connect()
`\-context`	createDispatchHook()	-
`\-`	createSelectorHook()	-
`\-`	createStoreHook()	-
触发	useDispatch()	this.props.dispatch()
读取	useSelector()	-
`\-`	useStore()	this.props.store

Reselect

分类	Hooks	Classes
`-`	createSelector()	-

Dva

底层：Redux + Redux Saga + React Redux

分类	概念	说明
模型（Reducer）	`namespace`	模型命名空间，需全局唯一
`\-状态`	`state`	初始状态
`\-同步更改`	`reducers`	同步更改状态数据
`\-异步更改`	`effects`	异步更改状态数据，用于和后端的异步通讯
`\-`	call()	用于调用异步逻辑，支持 promise
`\-`	put()	用于触发同步 action
`\-`	select()	用于从 state 里获取数据
连接（Connect）	`@connect()`	用来将 model 和组件连接到一起，并将相关数据和 `dispatch` 添加到组件的 props 中。
触发（Dispatch）	`this.props.dispatch(Action/Effect)`	触发 Action。
`\-同步 Action`	`{type: 'namespace/reducersName', payload: data}`	触发同步 Action（reducers 内定义的方法），同步方式更新 state。
`\-异步 Effect`	`{type: 'namespace/effectsName', payload: data}`	触发异步 Action（effects 内定义的方法），异步方式更新 state。
读取	`this.props[state]`	读取状态属性
加载状态（loading）	-	自维护加载状态

Redux Toolkit

底层：Redux + Redux Thunk + React Redux

分类	概念	说明
切面（Store/Reducer/Slice）	`name`	切面名称，需全局唯一
`\-状态`	`initialState`	初始状态
`\-同步更改`	`reducers`	同步更改状态数据
`\-异步更改`	`extraReducers`	自维护加载状态
`\-`	`createAsyncThunk()`	异步更改状态数据，用于和后端的异步通讯
连接（Provider）	`<Provider>`	用来将切面和组件连接到一起
触发（Dispatch）	`useDispatch()`	触发 Action。
`\-同步 Action`	`dispatch(featuresName())`	触发同步 Action（reducers 内定义的方法），同步方式更新 state。
`\-异步 Action`	`dispatch(asyncFeaturesName())`	触发异步 Action（createAsyncThunk 定义的方法），异步方式更新 state。
读取	`useSelector()`	读取状态属性
加载状态（loading）	extraReducers	自维护加载状态

API
Dva
Redux Toolkit