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

相关推荐
over69712 小时前
用 React Context 实现全局主题切换:从零搭建暗黑/亮色模式系统
前端·react.js·面试
白兰地空瓶12 小时前
告别“千里传荔枝”:React useContext 打造跨层级通信“任意门”
前端·react.js
用户81686947472513 小时前
Commit 阶段的 3 个子阶段与副作用执行全解析
前端·react.js
白雾茫茫丶13 小时前
动态配色方案:在 Next.js 中实现 Shadcn UI 主题色切换
react.js·next.js
holeer14 小时前
React UI组件封装实战——以经典项目「个人博客」与「仿手机QQ」为例
前端·javascript·react.js·ui·前端框架·软件工程
Blossom.1181 天前
多模态大模型LoRA微调实战:从零构建企业级图文检索系统
人工智能·python·深度学习·学习·react.js·django·transformer
xhxxx1 天前
从样式到结构:TailwindCss + Fragment 如何让 React 代码更干净、更高效
前端·css·react.js
ohyeah1 天前
React 中的跨层级通信:使用 Context 实现主题切换功能
前端·react.js
Dragon Wu1 天前
前端项目架构 项目格式化规范篇
前端·javascript·react.js·前端框架
RedHeartWWW2 天前
nextjs中,关于Layout组件和Page组件的认知
前端·react.js