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

相关推荐
LRH1 小时前
React 双缓存架构与 diff 算法优化
前端·react.js
中微子2 小时前
别再被闭包坑了!React 19.2 官方新方案 useEffectEvent,不懂你就 OUT!
前端·javascript·react.js
1in2 小时前
一文解析UseState的的执行流程
前端·javascript·react.js
鹏多多3 小时前
React无限滚动插件react-infinite-scroll-component的配置+优化+避坑指南
前端·javascript·react.js
阿喵派我来抓鱼6 小时前
深入理解 AI 流式接口:从请求到响应的完整解析
react.js·ai·前端框架·vue
DoraBigHead16 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
Jerry_Rod20 小时前
react+umijs 项目快速学习
前端·react.js
AliPaPa21 小时前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
Takklin1 天前
Vue 与 React 应用初始化机制对比 - 前端框架思考笔记
前端·react.js
Sherry0071 天前
【译】React 新手踩坑指南:9 个让你秃头的常见错误 🚨
javascript·react.js·前端框架