1、安装
npm install redux-thunk
2、引入,在store文件下,index中引入
iimport { createStore,applyMiddleware } from 'redux';
import reducer from './reducer'
import thunk from 'redux-thunk';
const store = createStore(
reducer,
applyMiddleware(thunk)
);//创建公共仓库
export default store;
3、在actionCreators.js
export const getTodoList = () => {
return (dispatch) => {//该函数可以接收dispatch参数
axios.get('/api/todolist')
.then((res) => {
const data=res.data
console.log(data)
const action=initList(data)
dispatch(action)
console.log(res)
})
.catch(() => {})
}
}
4、在组件中的componentDidMount中
const action=getTodoList()//因为用了redux-thunk中间件,所以这里返回的是一个函数
store.dispatch(action)//当执行这个方法的时候,返回的这个函数会自动执行,也就是去请求数据了,
那么什么是redux中间件呢
实质上是对dispatch方法的一个封装。之前action是一个对象,现在action可以是一个函数,
如果传递过来的是一个对象,dispatch会将这个对象直接传给store。但是如果传过来一个函数,它会让函数先执行,执行完,需要调用store才会去调用。dispatch会根据不同的参数执行不行的事情