reducer同步,dispatch异步

  • configureStore 是redux toolkit的核心,

自动设置redux devtools扩展,Thunk中间件,immer库

  • const store = configureStore({

reducer: {

bill: billReducer

}

});

configureStore 函数接收一个配置对象作为参数,其中 reducer 属性是一个对象,它的键是 state 的一部分,值是对应的 reducer 函数。在这个例子中,bill 是 state 的一个属性,它的值由 billReducer 函数来管理。

  • 基于promise,使用async/await 语法,在网络请求成功后,

使用dispatch触发同步reducer action(setBillList就是action方法),更新reducer state状态

// 编写异步

const getBillList = () => {

return async (dispatch) => {

// 编写异步请求

const res = await axios.get('http://localhost:8888/ka')

// 触发同步reducer,传递给action

dispatch(setBillList(res.data))

}

}

  • 组件特性,性能:useDispatch 钩子会返回一个稳定的 dispatch 函数引用,

可以在组件中使用它来分发 action。

const dispatch = useDispatch()

dispatch(getBillList())

上下问依赖:useDispatch自动从redux store中获取dispatch方法,

在组件树中传递,避免了手动传递dispatch的麻烦。

相关推荐
阿里巴啦3 分钟前
从零搭建移动端数字人生成应用:React + Go + D‑ID 实战
react.js·golang·状态模式·数字人·did·ai移动端数字人
泥菩萨^_^29 分钟前
【每天认识一个漏洞】React 和 Next.js RCE漏洞
前端·javascript·react.js
一只爱吃糖的小羊1 小时前
React 避坑指南:“闭包陷阱“
前端·javascript·react.js
by__csdn1 小时前
大前端:定义、演进与实践全景解析
前端·javascript·vue.js·react.js·typescript·ecmascript·动画
fruge3 小时前
React Fiber 架构详解:为什么它能解决页面卡顿问题?
前端·react.js·架构
Arvin_Rong3 小时前
回归传统?原生 JS + React 混合开发的实践与思考
javascript·react.js
by__csdn4 小时前
JavaScript性能优化实战:异步与延迟加载全方位攻略
开发语言·前端·javascript·vue.js·react.js·typescript·ecmascript
by__csdn5 小时前
JavaScript性能优化实战:减少DOM操作全方位攻略
前端·javascript·vue.js·react.js·性能优化·typescript
CaptainDrake5 小时前
Fiber 结构和普通 VNode 区别
react.js
Bigger17 小时前
🚀 “踩坑日记”:shadcn + Vite 在 Monorepo 中配置报错
前端·react.js·vite