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

相关推荐
开发者小天5 小时前
react中useEffect的用法,以及订阅模式的原理
前端·react.js·前端框架
coderHing[专注前端]8 小时前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
开发语言·前端·javascript·react.js·前端框架·ecmascript
代码小学僧10 小时前
从 Arco Table 迁移到 VTable:VTable使用经验分享
前端·react.js·开源
San3010 小时前
深度驱动:React Hooks 核心之 `useState` 与 `useEffect` 实战详解
javascript·react.js·响应式编程
@大迁世界11 小时前
面了 100+ 次前端后,我被一个 React 问题当场“打回原形”
前端·javascript·react.js·前端框架·ecmascript
骑驴看星星a11 小时前
【回顾React的一些小细节】render里不可包含的东西
前端·javascript·react.js
San30.12 小时前
现代前端工程化实战:从 Vite 到 React Router demo的构建之旅
前端·react.js·前端框架
烟袅12 小时前
深入理解 React 中 useState 与 useEffect
前端·javascript·react.js
小白阿龙13 小时前
脚手架启动失败(Vue CLI/Vite/Create React App)
前端·vue.js·react.js