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

相关推荐
酒尘&3 小时前
Hook学习-上篇
前端·学习·react.js·前端框架·react
GISer_Jing8 小时前
React Native 2025:从零到精通实战指南
javascript·react native·react.js
酒尘9 小时前
React交互学习篇
react.js
KKKK9 小时前
一次React19.2 Activity 组件使用问题排查
react.js
wordbaby10 小时前
React 误区粉碎:useEffectEvent 是“非响应式”的,所以它不会触发重渲染?
前端·react.js
crary,记忆12 小时前
React 之 useEffect
前端·javascript·学习·react.js
锈儿海老师13 小时前
深入探究 React 史上最大安全漏洞
前端·react.js·next.js
xiechao14 小时前
函数组件 useEffect 清理函数抛错:ErrorBoundary 能捕获吗?
前端·react.js
wordbaby14 小时前
组件与外部世界的桥梁:一文读懂 useEffect 的核心机制
前端·react.js
wordbaby14 小时前
永远不要欺骗 React:详解 useEffect 依赖规则与“闭包陷阱”
前端·react.js