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

相关推荐
用户12039112947266 小时前
从零掌握 React JSX:为什么它让前端开发像搭积木一样简单?
前端·react.js·面试
3秒一个大1 天前
JSX 基本语法与 React 组件化思想
前端·react.js
HexCIer1 天前
Arco Design 停摆!字节跳动 UI 库凉了?
react.js·前端框架
风止何安啊1 天前
React 入门秘籍:像搭积木一样写网页,JSX 让开发爽到飞起!
前端·react.js·前端框架
whyfail1 天前
React原理(暴力版)
前端·react.js
Crazy_Urus1 天前
深入解析 React 史上最严重的 RCE 漏洞 CVE-2025-55182
前端·安全·react.js
神秘的猪头1 天前
🎉 React 的 JSX 语法与组件思想:开启你的前端‘搭积木’之旅(深度对比 Vue 哲学)
前端·vue.js·react.js
开发者小天1 天前
react中useReducer的使用
前端·javascript·react.js
浮游本尊1 天前
React 18.x 学习计划 - 第九天:React 18高级特性和最佳实践
前端·学习·react.js