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

相关推荐
玉宇夕落4 小时前
从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化
react.js
3秒一个大5 小时前
React 父子组件数据传递:机制与意义解析
react.js
重铸码农荣光5 小时前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构
烟袅5 小时前
从零构建一个待办事项应用:一次关于组件化与状态管理的深度思考
前端·javascript·react.js
南山安7 小时前
React学习:通过TodoList,完整理解组件通信
javascript·react.js·前端框架
浮游本尊7 小时前
React 18.x 学习计划 - 第十天:React综合实践与项目构建
前端·学习·react.js
亚洲小炫风7 小时前
react 资源清单
前端·javascript·react.js
AAA阿giao8 小时前
React Hooks 详解:从 useState 到 useEffect,彻底掌握函数组件的“灵魂”
前端·javascript·react.js
打小就很皮...10 小时前
React 富文本图片上传 OSS 并防止 Base64 图片粘贴
前端·react.js·base64·oss
白兰地空瓶11 小时前
从 Todo 项目看 React 组件通信:核心逻辑与优化技巧
react.js