[JavaScript知识库]redux-中间件与redux调试工具

redux-中间件-理解

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

Redux 中间件

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

图示

没有中间件：

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

?使用中间件：

• dispatch(action) => 执行中间件代码 => reducer。

• dispatch() 就是 中间件 封装处理后的 dispatch，但是，最终一定会调用 Redux 库自己提供的 dispatch 方法

小结

1. 中间件是对原有功能的拓展

2. 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)

步骤

1. 安装：npm i redux-thunk

2. 使用：在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?

步骤

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

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

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

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

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

效果

?

?