[react] redux - 中间件 和 redux调试工具

目录

redux-中间件-理解

redux-中间件-redux-thunk

redux-中间件-redux-logger

redux 调试工具  redux-devtools-extension

---

问题：

获取数据时，如何发ajax拿数据，并保存到redux中？

方案1：

在业务组件中发请求，拿到数据之后，再dispath

 方案2：

在业务组件中直接dispatch，在dispatch中发请求，然后保存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'))

总结

1. redux提供了applyMiddleware功能， 允许我们去添加中间件

2. redux-thunk拓展了dispatch的功能，支持函数形式的 action

3. redux-thunk允许把发ajax的动作也封装在action中。

redux-中间件-redux-logger

掌握redux-logger的使用，能查看redux的操作日志；

理解多个中间件的工作过程

步骤

1. 安装：npm i redux-logger

2. 使用 store/index.js

1. 导入 redux-logger

2. 调用 applyMiddleware 函数时，将 logger 作为参数传入

import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import rootReducer from './reducers'
const store = createStore(rootReducer, applyMiddleware(logger)) 

  3. 测试效果。

任意调用 store.dispatch() 查看 logger 中间件记录的日志信息

总结

redux-logger可以用来查看开发日志

多个中间件按引入顺序执行

redux 调试工具  redux-devtools-extension

学会如何在项目中启动调试工具，能通过chrome开发者工具调试跟踪redux状态  

方便在浏览器中调试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

 效果

每一次redux的操作，就会有记录