Redux进阶二：使用redux-thunk中间件实现数据请求

看过前两篇文章的朋友们都知道我们创建的action函数最终都返回🔙对象，如下：

export const getDeleteItemAction =(index)=> ({
  type: DELETE_TODO_ITEM,
  index
})

是因为store只能接受action对象，但是如果涉及到有请求发送的时候返回对象就不容易操作，有没有什么方法能否返回一个函数，在函数里面进行请求呢？
有的！！redux的中间件redux-thunk!
第一步骤：

npm install redux-thunk

同时store.js文件需要变成了如下：

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
//这一块是从redux-thunk的gitlab上复制的代码
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
  const enhancer = composeEnhancers(applyMiddleware(thunk),);
  const store = createStore(
  reducer,
  enhancer
);
export default store;

actionCreators.js

export const initListAction =(data)=> ({
  type: INIT_LIST_ACTION,
  data
})
//上面都是一个函数返回一个对象，使用redux-thunk之后可以返回一个函数，这样可以把异步请求放在这个函数中
//store接收的是对象，所以函数里面需要处理对象通过dispatch把对象传给store
export const getTodoList =()=> {
  return (dispatch) => {
    axios
    .get("https://www.easy-mock.com/mock/5c4173448ff5e33c8a22766e/example/listdata")
    .then(res=>{
      const data = res.data.result
      const action = initListAction(data)
      dispatch(action)  //redux-thunk支持dispatch作为参数
    })
  }
}

利用redux-thunk返回一个函数，然后，由于store只能接受对象，对需要在函数里面在另定义一个对象，传递给数据
在请求数据的demo.js中直接

componentDidMount(){
  const action = getTodoList()
    store.dispatch(action)
}