我们可以在react组件中发送相应的网络请求，但是因为我们的数据是保存在我们的redux中的，那么，我们是否可以可以考虑将我们的异步请求的这个过程放在redux中进行呢？事实上，这是可以的，那就需要使用到我们的中间件，中间件的原理：劫持dispatch派发的action，在action中发送异步的网络请求，再派发相应的action，将请求的结果放在redux中，这就是redux中发送网路请求的一个过程。

1、redux-thunk中间件的使用原理

使用原理： 1、react-redux提供了一个函数入口，叫做applyMiddleware,可以将我们要使用的所有的中间件加入到这个函数里面，当作参数进行使用。 2、将应用插件函数的返回值，当作参数传递给createStore函数中，当作参数进行使用。 3、在业务组件挂载完毕后中派发一个函数，把这个函数定义在actionCreators中，不需要进行调用，thunk函数会自动调用，并且将dispatch和getState方法传入，在函数里面利用axios发送网络请求，获取数据，将获取的数据重新进行派发dispatch。

1.1 使用步骤

  1. store/index.js入口文件
  3. # 1、引入redux-thunk
  4. import thunkMiddleware from 'redux-thunk'
  6. # 2、引入中间件函数
  7. import { createStore, applyMiddleware } from 'redux' 
  9. // 引入reducer函数
  10. import reducer from './reducer.js'
  12. # 3、使用中间件的函数 将reduxThunk插入到redux中进行使用
  13. const StoreEnhance =  applyMiddleware(thunkMiddleware)
  15. const store = createStore(reducer, StoreEnhance)
  17. // 将store函数导出 提供给业务组件使用
  18. export default store

1.2 在组件中使用

  1. import React, { PureComponent } from 'react';
  3. // 引入connect函数
  4. import { connect } from 'react-redux';
  6. // 引入action
  7. import { incrementAction, addNumberAction, getHomeMultidata } from '../store/actionCreators';
  9. class Home extends PureComponent {
  10.   componentDidMount() {
  11.     // react-thunk的写法 调用函数 派发一个函数 而不是一个对象 这个函数会在actionCreators中自动进行执行
  12.     this.props.getAsyncData()
  13.   }
  14.   render() {
  15.     return (
  16.       <div>
  17.         <h2>Home组件-使用中间件redux-thunk在redux中进行异步请求</h2>
  18.         <h2>{ this.props.counter }</h2>
  19.         <button onClick={ () => this.props.btn1Click() }>+1</button>
  20.         <button onClick={ () => this.props.btn2Click(5) }>+5</button>
  21.       </div>
  22.     )
  23.   }
  24. }
  26. const mapStateToProps = state => {
  27.   return {
  28.     counter: state.counter
  29.   }
  30. }
  31. const mapDispatchToProps = dispatch => {
  32.   return {
  33.     btn1Click() {
  34.       dispatch(incrementAction())
  35.     },
  36.     btn2Click(num) {
  37.       dispatch(addNumberAction(num))
  38.     },
  39.     // 在redux中获取数据
  40.     getAsyncData() {
  41.       dispatch(getHomeMultidata)
  42.     }
  43.   }
  44. }
  46. export default connect(mapStateToProps, mapDispatchToProps)(Home)

1.3 在actionCreator.js中进行定义

  1. import { INCREMENT, ADD_NUMBER, DECREMENT, SUB_NUMBER, CHANGE_BANNER, CHANGE_RECOMMEND } from './constants'
  2. import axios from 'axios'
  4. // 自增
  5. export function incrementAction() {
  6.   return {
  7.     type: INCREMENT,
  8.   }
  9. }
  10. // 增加数字
  11. export function addNumberAction(num) {
  12.   return {
  13.     type: ADD_NUMBER,
  14.     num
  15.   }
  16. }
  17. // 自减
  18. export const decrementAction = () => {
  19.   return {
  20.     type: DECREMENT
  21.   }
  22. } 
  23. // 减少
  24. export const subNumberAction = num => {
  25.   return {
  26.     type: SUB_NUMBER,
  27.     num
  28.   }
  29. }
  31. // 轮播图的action
  32. export const changeBannerAction = banner => {
  33.   return {
  34.     type: CHANGE_BANNER,
  35.     banner
  36.   }
  37. }
  39. // 推荐的action
  40. export const changeRecommendAction = recommend => {
  41.   return {
  42.     type: CHANGE_RECOMMEND,
  43.     recommend
  44.   }
  45. }
  47. // 获取异步数据 redux-thunk的逻辑就是 拦截action 在action中发送相应的网络请求 同时这个函数可以将dispatch、getState传递过来
  48. export const getHomeMultidata = (dispatch, getState) => {
  49.   axios({ url: 'http://123.207.32.32:8000/home/multidata' }).then(res => {
  50.     const banner = res.data.data.banner.list
  51.     const recommend = res.data.data.recommend.list
  52.     // 获取了异步数据后 再次进行派发事件 直接使用上面的action
  53.     dispatch(changeBannerAction(banner))
  54.     // 再次派发action
  55.     dispatch(changeRecommendAction(recommend))
  56.   })
  57.   // 进行异步操作
  58. }

1.4 reducer.js文件中使用

  1. // 常量
  2. import { INCREMENT, DECREMENT, ADD_NUMBER, SUB_NUMBER, CHANGE_BANNER, CHANGE_RECOMMEND } from './constants';
  4. // 需要redux管理的初始化状态
  5. const initialState = {
  6.   counter: 100,
  7.   banner: [],
  8.   recommend: []
  9. }
  10. // 纯函数
  11. function reducer(state = initialState, action) {
  12.   switch(action.type) {
  13.     case INCREMENT: 
  14.       return {...state, counter: state.counter + 1 }
  15.     case ADD_NUMBER:
  16.       return {...state, counter: state.counter + action.num }
  17.     case DECREMENT:
  18.       return {...state, counter: state.counter - 1 }
  19.     case SUB_NUMBER:
  20.       return {...state, counter: state.counter - action.num }
  21.     // 修改banner的数据
  22.     case CHANGE_BANNER: 
  23.       return {...state, banner: action.banner }
  24.     // 修改recommend的数据
  25.     case CHANGE_RECOMMEND:
  26.       return {...state, recommend: action.recommend }
  27.     default:
  28.       return state
  29.   }
  30. }
  31. // 将纯函数进行导出
  32. export default reducer;

:::info 总结与整理redux-thunk的使用技巧：

  • 首先在redux的配置文件中对redux进行配置，react预留一个applyMiddleware的接口，提供给中间件的使用着，将中间件以参数的形式传入函数，函数调用后的结果以参数的形式，放入到createStore函数中。createStore函数中的第一个参数是reducer纯函数。
  • redux-thunk中间件的原理就是拦截actions，之前我们派发action的时候，就是派发一个对象的形式，现在我们可以直接派发一个函数了，这个函数定义在actionCreators中，我们的redux内部会自动回调这个函数，并且将dispatch、getState函数作为参数传到我们自定的函数中。
  • 当redux对我们的函数进行回调的时候，我们就可以在这个函数中进行相应的异步操作，获取到异步操作的结构后，我们任然可以正常dispatch相应的action了。我们异步的数据可以作为action的参数传递给我们的reducer函数。reducer内部就会对这个函数进行相应的处理。直到完成逻辑的任务。 :::

2、reducer函数的拆分

:::info 在上述的开发中，我们可以看出，我们组件需要的所有的状态，全部置于一个reducer中，这样是不规范与不合理的，因为随着我们项目的扩大，我们项目需要管理的状态越来越多，将我们所有状态的处理逻辑放置于一个reducer函数中是不合理的。所以我们需要将reduce函数进行拆分，将其按照相应的模块进行拆分，那么我们的逻辑就可以分开了。 :::

  1. // reducer函数逻辑的拆解与拆分。
  3. // 常量
  4. import { INCREMENT, DECREMENT, ADD_NUMBER, SUB_NUMBER, CHANGE_BANNER, CHANGE_RECOMMEND } from './constants';
  6. // 全局的initialCountState数据
  7. const initialCountState = {
  8.     counter: 100
  9. };
  10. // 定义reducer函数
  11. function counterReducer(state = initialCountState, action) {
  12.     switch(action.type) {
  13.     case INCREMENT: 
  14.       return {...state, counter: state.counter + 1 }
  15.     case ADD_NUMBER:
  16.       return {...state, counter: state.counter + action.num }
  17.     case DECREMENT:
  18.       return {...state, counter: state.counter - 1 }
  19.     case SUB_NUMBER:
  20.       return {...state, counter: state.counter - action.num }
  21.     default:
  22.       return state
  23.   }
  24. }
  26. // 全局的initialHomeState数据 
  27. const initialHomeState = {
  28.     banner: [],
  29.   recommend: []
  30. };
  31. // 定义homeReducer纯函数
  32. function homeReducer(state = initialHomeState, action) {
  33.   switch(action.type) {
  34.     // 修改banner的数据
  35.     case CHANGE_BANNER: 
  36.       return {...state, banner: action.banner }
  37.     // 修改recommend的数据
  38.     case CHANGE_RECOMMEND:
  39.       return {...state, recommend: action.recommend }
  40.     default:
  41.       return state
  42.   }
  43. }
  45. // 需要将上述两个reducer纯函数进行相应的合并处理 我们自己对其进行的拆分。
  46. function reducer(state = {}, action) {
  47.     return {
  48.       counterInfo: counterReducer(counterInfo, action),
  49.     homeInfo: homeReducer(homeInfo, action)
  50.   }
  51. }
  53. // 我们可以使用redux提供给我们的combineReducer函数
  54. import { combineReducers } from "redux";
  55. // combineReducer函数接收一个对象作为参数。
  56. const reducer = combineReducer({
  57.     counterInfo: counterReducer,
  58.   homeInfo: homeReducer
  59. })
  61. // 将纯函数进行导出
  62. export default reducer;
  64. // 上述reducer的代码合并以后，需要注意的是在我们的业务组件中访问的时候，需要使用state.counterInfo.counter和state.homeInfo.banner与state.homeInfo.recommend的方式获取最新的全局的状态。