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

相关推荐
前端精髓6 分钟前
移除 Effect 依赖
前端·javascript·react.js
菲利普马洛4 小时前
记一次主题闪烁问题
前端·css·react.js
宇擎智脑科技6 小时前
Claude Code 源码分析(七):终端 UI 工程 —— 用 React Ink 构建工业级命令行界面
前端·人工智能·react.js·ui·claude code
Ruihong10 小时前
🚀 Vue 一键转 React!企业后台 VuReact 混写迁移实战
vue.js·react.js
@大迁世界11 小时前
17.在 React 中如何根据条件决定渲染哪个组件?
前端·javascript·react.js·前端框架·ecmascript
lihaozecq19 小时前
我用 1 天的时间 vibe coding 了一个多人德州扑克游戏
前端·react.js·ai编程
Highcharts.js1 天前
高级可视化图表的暗色模式与主题|Highcharts 自适应主题配色全解
前端·react.js·实时图表
ISkp3V8b41 天前
从 ReAct 到 Workflow:基于云端 API 构建事件驱动的智能体
前端·react.js·前端框架
谢尔登1 天前
【React】setState 触发渲染的流程
前端·react.js·前端框架
弓.长.1 天前
ReactNative for OpenHarmony项目鸿蒙化三方库:lottie-react-native — Lottie动画组件
react native·react.js·harmonyos