在create-react-app脚手架中：【Redux和Redux-thunk 处理异步函数】

问题是这样的，之前我们调用

store.dispatch(action)

时，action都是一个类似

{type: 'string'}

的对象，或者是 执行一个 action 创建函数。因为 redux 的机制，它会自动处理这样的对象。
现在如果

store.dispatch(action)

里面传递的不是一个类似

{type: 'string'}

的对象，而是一个异步函数。那么

store

内部会一脸懵逼， 不知道如何处理了，所以这时候就需要一个中间件来处理了，redux 也考虑到了这个问题，于是给广大开发者提供了 applyMiddleware 这样的一个函数，我们再结合一个专门处理异步的插件

redux-thunk

就可以处理

store.dispatch(asyncFunc)

这种调用方式的语句了。

下面是具体步骤：

一 安装

redux-thunk

npm install redux-thunk --save

二 从

redux-thunk

引入

thunk

import thunk from 'redux-thunk';

三 从

redux

增加引入中间件函数

applyMiddleware

import { createStore applyMiddleware } from 'redux';

四 在

createStore(...)

中增加第二个参数

const store = createStore(reducerFunc, applyMiddleware(thunk));

五 在

store.dispatch(asyncFunc)

中传入异步函数

function() timedTask {
return dispatch => {
setTimeout(()={
dispatch(actionObj);//这样就可以使用异步方法了
},2000)
}
}
store.dispatch(asyncFunc);

下面扔出项目源码

和往常一样，三个文件仍然是基于 create-react-app脚手架 创建的项目的

./src/

index.js

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import { counter, addGun, removeGun, addGunAsync} from './index.redux';
import App from './app';

//store
const store = createStore(counter, applyMiddleware(thunk));

//get inititalState
const init = store.getState();
console.log(init);

//store.subscribe所需的参数为
store.subscribe(render);
function render() {
ReactDOM.render(
<App store={store} addGun={addGun} removeGun={removeGun} addGunAsync={addGunAsync}/>,
document.getElementById('root')
);
}
render();

//每次调用store.dispatch就会触发store.subcribe, 通常store.dispatch放在最后

index.redux.js

import React from 'react';

class App extends React.Component {
// constructor(props) {
//     super(props);
// }
render() {
let store = this.props.store;
let addGun = this.props.addGun;
let removeGun = this.props.removeGun;
let addGunAsync = this.props.addGunAsync;
let num = store.getState()
return (
<div>
<h1>
现在有机枪 { num } 把
</h1>
<button onClick={()=>store.dispatch(addGun())}> 申请武器</button>&nbsp;
<button onClick={()=>store.dispatch(removeGun())}> 上交武器</button>&nbsp;
<button onClick={()=>store.dispatch(addGunAsync())}> 试用两天再发武器</button>
</div>/*onClick后面的值必须是纯函数的形式，而不能是一段可执行代码*/
)
}
}
export default App;

app.js

import React from 'react';

class App extends React.Component {
// constructor(props) {
//     super(props);
// }
render() {
let store = this.props.store;
let addGun = this.props.addGun;
let removeGun = this.props.removeGun;
let addGunAsync = this.props.addGunAsync;
let num = store.getState()
return (
<div>
<h1>
现在有机枪 { num } 把
</h1>
<button onClick={()=>store.dispatch(addGun())}> 申请武器</button>&nbsp;
<button onClick={()=>store.dispatch(removeGun())}> 上交武器</button>&nbsp;
<button onClick={()=>store.dispatch(addGunAsync())}> 试用两天再发武器</button>
</div>/*onClick后面的值必须是纯函数的形式，而不能是一段可执行代码*/
)
}
}
export default App;