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 正在演变为一场不可逆的赛博瘟疫:AI 投毒、编译器迷信与装死的官方
前端·react.js·设计模式
学高数就犯困7 小时前
React:一个例子讲清楚 useEffect 和 useReducer
react.js
Wect7 小时前
JSX & ReactElement 核心解析
前端·react.js·面试
codingWhat1 天前
手撸一个「能打」的 React Table 组件
前端·javascript·react.js
程序员ys1 天前
前端权限控制设计
前端·vue.js·react.js
不会敲代码11 天前
从零开始用 TypeScript + React 打造类型安全的 Todo 应用
前端·react.js·typescript
小时前端2 天前
React性能优化的完整方法论,附赠大厂面试通关技巧
前端·react.js
阿慧勇闯大前端2 天前
在AI时代,再去了解react19新特性还有用吗? 最近总有朋友问我:“现在AI写代码这么厉害了,我写个需求丢给ChatGPT,几秒钟就生成一堆组件,还学新特
前端·react.js
喵爱吃鱼2 天前
关于我明明用了ref还是陷入React闭包陷阱
前端·react.js
Lupino2 天前
被 React “玩弄”的 24 小时:为了修一个不存在的 Bug,我给大模型送了顿火锅钱
前端·react.js