useReducer和替代Rwdux

127 阅读1分钟

关于useReducer总的来说是useState的复杂版,当超过三次重复事件时使用
总共分为四个步骤: image.png

image.png

初始 initFormData 然后写一个 reducer 的函数接受两个参数读和写

image.png

这里useReducer得到的接口顺序特别注意下,写和读

替代Rwdux

image.png

store

将数据集中放在一个store对象中
image.png

reducer

将所有操作集中在reducer中
image.png

Context

useReducer接受上边创建的两个接口:reducer和store,将这两个函数赋值api context.Provider 的value={api},被Context包起来的组件可以用Context接受的接口操作

image.png

组件内部得到context传来的接口 const {state,dispatch} = userContext(Context)
用useEffect来接受传来的数据,ajax模拟了数据库信息 image.png