redux-中间件与redux调试工具

最新推荐文章于 2025-02-27 16:46:41 发布

Why_so_serious_Y

最新推荐文章于 2025-02-27 16:46:41 发布

阅读量260

点赞数

文章标签：其他 react.js javascript

本文链接：https://blog.youkuaiyun.com/Wy_so_serious/article/details/121544633

版权

本文详细介绍了Redux中间件的工作原理，重点探讨了redux-thunk的异步操作处理方式，并展示了如何在store中集成redux-devtools-extension进行调试。通过实例演示了如何在实际项目中应用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

redux-中间件-理解

中间件：middleware。用来在不损害原功能的前提下，引入额外的代码来拓展功能。

Redux 中间件

中间：在 dispatch action 和到达 reducer 之间

图示
没有中间件：

dispatch(action) => reducer。用来发起状态更新

使用中间件：

dispatch(action) => 执行中间件代码 => reducer。
dispatch() 就是中间件封装处理后的 dispatch，但是，最终一定会调用 Redux 库自己提供的 dispatch 方法

小结

中间件是对原有功能的拓展
redux中间件的执行时机在dispatch之后，执行reducer逻辑之前

redux-中间件-redux-thunk

作用

redux-thunk 中间件允许redux处理函数形式的 action。在函数形式的 action 中就可以执行异步操作代码，完成异步操作。

之前

const action1 = {type: 'todos/add', payload: '学习redux'}
dispatch(action1)

之后

const action1 = async (dispatch) =>{
  const res = await 异步动作()
  dispatch({type: 'todos/add', payload: '学习redux'})
}
 
dispatch(action1)

步骤

安装：npm i redux-thunk
使用：在store/index.js
1. 导入 redux-thunk , applyMiddleware（申请中间件）

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

2.调用applyMiddleware将 thunk 添加到中间件列表中

const store = createStore(rootReducer, applyMiddleware(thunk))

3.修改 action creator，返回一个函数，其形参就是redux的dispatch

const addTodo = (name)=> {
  return async (dispatch) =>{
    const res = await 异步动作()
    dispatch({type: 'todos/add', payload: name})
  }
}
 
dispatch(addTodo('学习redux'))

redux-devtools-extension的使用

redux-devtools-extension

方便在浏览器中调试redux操作的工具

先要安装 redux的开发者工具，再安装redux调试工具

官方文档 redux-devtools-extension

步骤

安装react开发者工具（chrome浏览器插件）

安装redux的开发者工具（chrome浏览器插件）

在项目中安装redux调试工具，它是一个npm包。 npm i redux-devtools-extension -D

配置。在store/index.js中进行配置和导入

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(reducer, composeWithDevTools(applyMiddleware(中间件..)))
 
export default store

效果：