作用:解決異步代碼的問題 [文檔地址](https://github.com/reduxjs/redux-thunk#installation) ## 1.安裝 ~~~ npm install redux-thunk ~~~ ~~~ //store>index.js import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers/index'; // Note: this API requires redux@>=3.1.0 const store = createStore( rootReducer, applyMiddleware(thunk) ); ~~~ ## 2.精確配置 [地址](https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup) ~~~ import {createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; import reducer from './reducer'; 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.將http請求放在actionCreator.js中 ~~~ // 直接將action進行封裝使用 import {inputChange,addItem,deleteItem,http} from "./actionType.js"; import axios from "axios-jsonp-pro" const valueChangeAction=(value)=>{ return { type:inputChange, value } } const valueaddItemAction=(value)=>{ return { type:addItem, value } } const valuedeleteItemAction=(index)=>{ return { type:deleteItem, index } } const httpAction=(value)=>{ return{ type:http, value } } //中轉（定義一個方法將action對象裝在函數中，通過redux-htunk傳遞的是這個封裝的函數而不是action，相當于是對ajax的一個封裝在其他頁面、組件中直接調用即可） const getHttpTitlesAction=()=>{ return (dispatch)=>{ var url="https://douban.uieee.com/v2/movie/top250"; axios.jsonp(url).then(res=>{ console.log(res); var subjects=res.subjects; var titles=[]; subjects.forEach(element => { var{title}=element titles.push(title) }); //調用上面封裝的action dispatch(httpAction(titles)); }) } } export{valueChangeAction,valueaddItemAction,valuedeleteItemAction,httpAction,getHttpTitlesAction} ~~~ ## 4.在組件componentDidMount中調用 ~~~ //app.js import {valueChangeAction,valueaddItemAction,valuedeleteItemAction,httpAction,getHttpTitlesAction} from "../store/actionCreators" componentDidMount(){ store.dispatch(getHttpTitlesAction()); } ~~~