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

相关推荐
我是刘成12 小时前
基于React Native 0.83.1 新架构下的拆包方案
react native·react.js·架构·拆包
梦65013 小时前
Vue 组件 vs React 组件深度对比
javascript·vue.js·react.js
全栈前端老曹15 小时前
【ReactNative】页面跳转与参数传递 - navigate、push 方法详解
前端·javascript·react native·react.js·页面跳转·移动端开发·页面导航
_Kayo_16 小时前
React上绑定全局方法
前端·javascript·react.js
梦65021 小时前
React + FullCalendar 实现高性能跨天事件日历组件
前端·react.js·前端框架
C_心欲无痕21 小时前
react - 组件之间的通信
前端·javascript·react.js
想学后端的前端工程师1 天前
【React Hooks深度实战指南:从原理到最佳实践】
前端·react.js·前端框架
San30.1 天前
从面向对象 CSS 到原子化架构:Tailwind CSS 与 React 性能优化实践
css·react.js·架构
IT古董1 天前
企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第五篇:登录态与权限控制
javascript·react.js·ui
未知原色2 天前
web worker使用总结(包含多个worker)
前端·javascript·react.js·架构·node.js