react-thunk

概念

redux-thunk是一个redux的中间件，用来出来redux中的复杂逻辑，比如异步请求

redux-thunk中间件可以让action创建函数不仅仅返回一个action对象，也可以是返回一个函数

使用

安装：npm install redux-thunk --save

步骤1：
import {createStore,applyMiddleware} from 'redux';
import reducer from './reducer';
import thunk from "redux-thunk";
步骤2：
const store = createStore(reducer,applyMiddleware(thunk),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;

redux-dev-tools和redux-thunk兼容

安装插件

下载地址：https://github.com/zalmoxisus/redux-devtools-extension

import {createStore,applyMiddleware,compose} from 'redux';
import reducer from './reducer';
import thunk from "redux-thunk";
/*不使用redux-thunk*/
// const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());/*使用redux-thunk*/
// const store = createStore(reducer,applyMiddleware(thunk),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
//redux-dev-tools和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;

action具体实现

export const initListAction = () => {    
  return (dispatch) => {        
     http.get("/api/shop", {}, (data) => {            
     const list = data.data.list;            
     if (data.responeStatus === "0") {                
         store.dispatch({                    
             type:INIT_LIST_ITEM,                    
             list               
         });            
      }        
  })    
}};