在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;