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的麻烦。

相关推荐
Maimai108087 分钟前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
小三金7 小时前
EXPO+RN echarts图表库,以及如何使用
前端·javascript·react.js
weelinking9 小时前
【claude】14_Claude作为技术文档助手
前端·人工智能·react.js·数据挖掘·前端框架
用户8876654266310 小时前
React 多步骤表单工程化落地:从 Zod Schema、React Hook Form 到 Zustand 持久化
react.js
用户8876654266310 小时前
React Query + Zustand 正确结合方式:不要把接口数据复制进 Store
react.js
放下华子我只抽RuiKe512 小时前
React 从入门到生产(三):副作用与数据获取
前端·javascript·深度学习·react.js·开源·ecmascript·集成学习
前端若水12 小时前
技术选型:React 19 + TypeScript + TailwindCSS
前端·react.js·typescript
卸任12 小时前
为Tiptap富文本编辑器增加导出PDF功能
前端·react.js
jiayong2313 小时前
前端面试题库 - React框架篇
前端·javascript·react.js
前端若水13 小时前
项目初始化:Vite + React + shadcn/ui
前端·react.js·ui