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

相关推荐
liveling1 小时前
我用 React 19 + TypeScript 搭了个 AI 智能题库平台,还把它托管上线了(附在线 Demo)
react.js
大家的林语冰2 小时前
React 生态大迁徙,脸书源码仓库跑路,核心技术栈全员加盟 React 基金会!
前端·javascript·react.js
vim怎么退出4 小时前
Dive into React——高级特性
前端·react.js·源码阅读
Csvn5 小时前
React useEffect 异步竞态:90% 的人都踩过的坑
前端·react.js
qq_363066936 小时前
react 使用web component导出静态html报告
前端·react.js·html·页面导出
放下华子我只抽RuiKe56 小时前
FastAPI 全栈后端(五):后台任务与消息队列
前端·javascript·react.js·ai·前端框架·fastapi·ai编程
小二·7 小时前
React 18 新特性与 Hooks 进阶实战
前端·react.js·前端框架
六月的可乐7 小时前
【干货】小程序虚拟瀑布流探索小结
前端·react.js·小程序
鹤鸣的日常20 小时前
前端运行时动态环境变量方案
前端·react.js·docker·前端框架·vue·gitlab