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

相关推荐
小刘不知道叫啥8 小时前
React源码揭秘 | 启动入口
前端·react.js·前端框架
程序员小续14 小时前
Excel 表格和 Node.js 实现数据转换工具
前端·javascript·react.js·前端框架·vue·excel·reactjs
Eamonno1 天前
深入理解React性能优化:掌握useCallback与useMemo的黄金法则
react.js·性能优化
goldenocean1 天前
React之旅-02 创建项目
前端·react.js·前端框架
一路向前的月光1 天前
React(8)
前端·react.js·前端框架
林啾啾1 天前
常用的 React Hooks 的介绍和示例
前端·javascript·react.js
孟陬1 天前
持续改善 React 代码的 SOLID 原则(附带 hooks 详细案例)适用于高级前端
react.js·设计模式·typescript
goldenocean2 天前
React之旅-01 初识
前端·javascript·react.js
power-辰南2 天前
AI Agent架构深度解析:从ReAct到AutoGPT,自主智能体的技术演进与工程实践
人工智能·react.js·架构·ai agent
开发者每周简报2 天前
React:UI开发的革新者
javascript·react native·react.js