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

相关推荐
张一凡931 小时前
easy-model 实战:跨组件通信、监听与异步加载,一库搞定 React 状态难题
前端·react.js
用户5757303346242 小时前
JavaScript 事件循环:宏任务与微任务执行顺序一图搞懂
javascript·react.js
大雷神3 小时前
HarmonyOS APP<玩转React>开源教程六:数据模型设计与实现
react.js·harmonyos
rmst4 小时前
列表的拖动排序动画原理
javascript·react.js·动效
nunumaymax4 小时前
【第二章-React面向组件编程(二】
react.js
Maimai108085 小时前
React Server Components 是什么?一文讲清 CSR、Server Components 与 Next.js 中的客户端/服务端组件
前端·javascript·css·react.js·前端框架·html·web3
前端进阶之旅1 天前
React 18 并发特性实战指南:提升大型应用性能的关键技术
前端·react.js·前端框架
Maimai108081 天前
Next.js 16 缓存策略详解:从旧模型到 Cache Components
开发语言·前端·javascript·react.js·缓存·前端框架·reactjs
下北沢美食家1 天前
React面试题
前端·javascript·react.js
有意义1 天前
极简的React 实现一
前端·javascript·react.js