redux-thunk 就是让store.dispatch()中可以传函数了,以前传的都是对象(百度到的介绍,供个人复习便于理解)
官方文档
const store = createStore( reducer, applyMiddleware(thunk) )
因为createStore中只能放两个参数,为了适应redux devTools修改如下,使用compose增强函数
import { createStore , applyMiddleware ,compose } from 'redux' // 引入createStore方法 import reducer from './reducer' import thunk from 'redux-thunk' 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 //暴露出去
3.使用
//actionCreators中
export const getListAction =(data)=>({ type:GET_LIST, data }) export const getTodoList =()=>{ return ()=>{ axios.get('/api/getGoodsMenu').then((res)=>{ const data = res.data.result; const action = getListAction(data); store.dispatch(action) }) } }
//组件中 componentDidMount(){ const action = getTodoList() store.dispatch(action) }