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

相关推荐
Marshmallowc16 分钟前
React性能优化:useState初始值为什么要用箭头函数?深度解析Lazy Initialization与Fiber机制
前端·react.js·性能优化·前端框架·react hooks
哈哈你是真的厉害1 小时前
小白基础入门 React Native 鸿蒙跨平台开发:模拟一个URL解析工具
react native·react.js·harmonyos
2501_944711431 小时前
React性能优化相关hook记录:React.memo、useCallback、useMemo
javascript·react.js·性能优化
哈哈你是真的厉害2 小时前
小白基础入门 React Native 鸿蒙跨平台开发:实现一个简单的记账本小工具
react native·react.js·harmonyos
梦6502 小时前
React 高阶组件
前端·react.js·前端框架
Marshmallowc2 小时前
从URL变化到组件重绘:React Router 状态分发机制与组件挂载逻辑深度全解
前端·react.js·前端框架·react router·组件生命周期
摘星编程2 小时前
在OpenHarmony上用React Native:MapView路线规划
javascript·react native·react.js
Marshmallowc2 小时前
React页面刷新数据丢失怎么办?彻底掌握LocalStorage持久化与状态回填的最佳实践
前端·javascript·react.js
梦6502 小时前
React 类组件与函数式组件
前端·javascript·react.js
摘星编程15 小时前
用React Native开发OpenHarmony应用:timing定时动画参数
javascript·react native·react.js