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

相关推荐
白兰地空瓶7 小时前
🚀你以为你在写 React?其实你在“搭一套前端操作系统”
前端·react.js
专注前端30年15 小时前
在日常开发项目中Vue与React应该如何选择?
前端·vue.js·react.js
风无雨15 小时前
在 React 中实现数学公式显示:使用 KaTeX 和 react-katex
前端·react.js·前端框架
前端无涯18 小时前
react组件(2)---State 与生命周期
前端·react.js
前端无涯18 小时前
react组件(3)---组件间的通信
前端·react.js
前端无涯18 小时前
react组件(1)---从入门到上手
react.js·前端框架
风止何安啊20 小时前
一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
前端·react.js·面试
前端无涯20 小时前
react---JSX完全指南:从基础语法到进阶实战
react.js·前端框架
Alair‎21 小时前
202React-Query:useMutation
react.js
是杉杉吖~21 小时前
《5 分钟上手 React Flex 容器:从 0 搭建响应式卡片列表》
前端·react.js·前端框架