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

相关推荐
2401_860319526 小时前
在React Native鸿蒙跨平台开发中实现一个冒泡排序算法并将其应用于数据排序,如何进行复制数组以避免直接修改状态中的数组
javascript·算法·react native·react.js·harmonyos
rockmelodies9 小时前
CVE-2025-55182:React Server Components 断点跟踪
前端·react.js·前端框架
赵财猫._.9 小时前
React Native鸿蒙开发实战(二):基础组件与Flex布局
react native·react.js·harmonyos
用户479492835691510 小时前
CVE-2025-55182:React 史上最严重漏洞,CVSS 满分 10.0
安全·react.js·全栈
CnLiang11 小时前
React Compiler Plugin
前端·react.js
一只爱吃糖的小羊11 小时前
React 19 生命周期:从入门到实战的完整指南
前端·react.js
一只爱吃糖的小羊12 小时前
React 19:革命性升级与全面使用指南
react.js
一只爱吃糖的小羊12 小时前
React 19 vs Vue 3:深度对比与选型指南
前端·vue.js·react.js
光影少年13 小时前
react怎么实现响应式?
前端·react.js·前端框架
黛色正浓14 小时前
【React】极客园案例实践-编辑文章模块和项目打包
前端·react.js·前端框架