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

相关推荐
漫天黄叶远飞2 小时前
React 组件通讯全攻略:拒绝 "Props" 焦虑,掌握数据流动的艺术
前端·react.js·前端框架
holidaypenguin3 小时前
antd 5 + react 18 + vite 7 升级
前端·react.js
济南壹软网络科技有限公司3 小时前
深度解构:基于 React 19 + WebSocket 的高性能 SocialFi 社交金融架构
websocket·react.js·金融·即时通讯
用户8168694747254 小时前
深入 useMemo 与 useCallback 的底层实现
前端·react.js
有意义19 小时前
从 useState 到 useEffect:React Hooks 核心机制详解
javascript·react.js·前端工程化
学高数就犯困20 小时前
React + Vite:用Fetch将.csv大文件数据转成JSON字符串
react.js
bytemanx21 小时前
深入源码:React 19 useActionState 与 Next.js Server Actions 的完美融合
react.js·next.js
ErMao1 天前
开始搭建第一个React项目吧~
前端·react.js
苹果电脑的鑫鑫1 天前
vue和react缩进规则的配置项如何配置
前端·vue.js·react.js
yuhaiqun19891 天前
学AI Agent:从React模式到Plan框架,3条路径一次学透
人工智能·经验分享·笔记·react.js·机器学习·ai·aigc