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

相关推荐
QQRRRRW41 分钟前
Tailwind+VScode (Vite + React + TypeScript) 原理与实践
vscode·react.js·typescript
龙颜3 小时前
从0-1封装一个React组件
前端·react.js
啃火龙果的兔子3 小时前
react-i18next+i18next-icu使用详解
前端·javascript·react.js
努力往上爬de蜗牛4 小时前
react native打包后发生的问题
react.js
打小就很皮...5 小时前
React 项目开发指南:脚手架搭建、Axios 封装与 Gitee 远程仓库配置
react.js·gitee·axios
胡琦博客7 小时前
21天开源鸿蒙训练营|Day2 ReactNative 开发 OpenHarmony 应用环境搭建实录
javascript·react native·react.js
6***37948 小时前
React Native热更新方案
javascript·react native·react.js
x***J3488 小时前
React Native组件封装
javascript·react native·react.js
E***U9458 小时前
React Native开发
android·react native·react.js
t***L2668 小时前
React Native真机调试连接不上的解决
javascript·react native·react.js