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

相关推荐
天蓝色的鱼鱼6 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong9 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373211 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪14 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码15 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农15 小时前
【React用到的一些算法】游标和栈
算法·react.js
小高00715 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
江城开朗的豌豆17 小时前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆17 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js