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

相关推荐
郭小铭18 小时前
将 Markdown 文件导入为 React 组件 - 写作文档,即时获取交互式演示
前端·react.js·markdown
初遇你时动了情19 小时前
不用每个请求都写获取请求 类似无感刷新逻辑 uniapp vue3 react实现方案
javascript·react.js·uni-app
拖拉斯旋风19 小时前
🧠 `useRef`:React 中“默默记住状态却不打扰 UI”的利器
前端·javascript·react.js
百罹鸟20 小时前
【react 高频面试题—核心原理篇】:useEffect 的依赖项如果是数组或对象(引用类型),会有什么问题?如何解决?
前端·react.js·面试
hibear20 小时前
Smart Ticker - 支持任意字符的高性能文本差异动画滚动组件
前端·vue.js·react.js
Mintopia20 小时前
🌈 React-Markdown 教学指南 —— 写给想让网页诗意地“读懂” Markdown 的你 ✨
前端·react.js·markdown
m0_6726565420 小时前
React 使用 JSX 来替代常规的 JavaScript。
前端·javascript·react.js
一只爱吃糖的小羊20 小时前
Vue 3 vs React 19:响应式系统的“自动挡“与“手动挡“之争
前端·vue.js·react.js
weixin_4624462320 小时前
利用qoder开发React + HanziWriter 实现幼儿园汉字描红(支持笔顺演示 / 判错 / 拼音 / 组词)
前端·react.js·前端框架
黎明初时20 小时前
React基础框架搭建1-计划:react+router+redux+axios+Tailwind+webpack
前端·react.js·webpack·架构