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

相关推荐
晴天168 小时前
React 版本迭代解析:从15到19 核心差异-Day40
前端·react.js·前端框架
倾颜10 小时前
AI Chat 长会话性能实践:消息虚拟化、动态高度与流式滚动设计
前端·react.js·node.js
天道kabuto11 小时前
前端每日知识点:React Fiber 与 AI 流式长文本渲染:从调度原理到工程落地
react.js
光影少年1 天前
react navite跨端项目的痛点、踩过哪些坑、怎么解决
前端·react native·react.js
光影少年2 天前
如何做大型React+RN 项目架构设计、目录规范
前端·react native·react.js
yyt3630458412 天前
KLineChartQuant:GLSL 的精度问题及 RTC 解法
前端·vue.js·react.js·交互·图形渲染·webgl·数据可视化
光影少年2 天前
从输入URL到页面渲染,React/RN 整体加载流程
前端·javascript·react native·react.js·前端框架
晓得迷路了2 天前
栗子前端技术周刊第 145 期 - Remix 3 RC、htmx 4.0、Rslib 1.0...
前端·javascript·react.js
名字还没想好☜3 天前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js