react：用redux实现简单计算器的过程中使用异步编程的一个小例子

首先是项目的基本结构：

1、下载redux插件(异步中间件)

npm install --save redux-thunk

2、在redux/store.js中引入

import thunk from 'redux-thunk'

3、在createStore方法中传入一个由applyMiddleware（thunk）返回的函数对象

const store = createStore(calc,composeWithDevTools(applyMiddleware(thunk)))

4、在actions.js中添加异步函数，容器组件app.js中导入该函数，使用react-redux中的connect方法向外暴露连接，使得UI组件calculator.jsx可以接受state和行为函数。

下面即为相关文件代码：
calculator.jsx：

/*
UI组件: 不包含任何redux API
 */
import React,{Component} from "react"
import {PropTypes} from 'prop-types'
import {jia,jian,cheng,chu} from '../redux/actions'

export default class Calculator extends Component {
    static propTypes = {
        state: PropTypes.number.isRequired,
        jia: PropTypes.func.isRequired,
        jian: PropTypes.func.isRequired,
        cheng: PropTypes.func.isRequired,
        chu: PropTypes.func.isRequired,
        empty: PropTypes.func.isRequired,
        handleAsync: PropTypes.func.isRequired,
    }

    handleCal=()=>{
        const {state,jia,jian,cheng,chu} = this.props
        const num1 = this.input1.value.trim()*1
        const num2 = this.input2.value.trim()*1
        if(num1 && num2){
            switch (this.select.value) {
                case 'JIA': jia(num1,num2)
                    break
                case 'JIAN': jian(num1,num2)
                    break
                case 'CHENG': cheng(num1,num2)
                    break
                case 'CHU': chu(num1,num2)
                    break
            }
        }else {
            alert('出错了')
        }

    }
    handleEmp=()=>{
        const {empty} = this.props
        this.input1.value = ''
        this.input2.value = ''
        empty()
    }
    handleAsync=()=>{
        const num1 = this.input1.value.trim()*1
        const num2 = this.input2.value.trim()*1
        if(this.select.value === 'JIA'){
            this.props.handleAsync(num1,num2)
        }
    }
    render () {
        return (
            <div>
                <input type="text" ref={(input1) => this.input1=input1}/>{' '}
                <select ref={(select) => this.select=select}>
                    <option value='JIA'>+</option>
                    <option value='JIAN'>-</option>
                    <option value='CHENG'>*</option>
                    <option value='CHU'>/</option>
                </select>
                {' '}
                <input type="text" ref={(input2) => this.input2=input2}/>{' '}
                ={' '}
                <input type="text" value={this.props.state}/>{' '}
                <button onClick={this.handleCal}>计算</button>
                <button onClick={this.handleEmp}>清空</button>
                <button onClick={this.handleAsync}>async of +</button>
                <br/>
            </div>
        )
    }
}

app.js：

/*
包含Counter组件的容器组件
 */
import React from "react";
import {connect} from 'react-redux'
import Calculator from '../components/calculator'
import {jia,jian,cheng,chu,empty,handleAsync} from '../redux/actions'

export default connect(
    (state) => ({state:state}),
    {jia: jia,jian: jian,cheng: cheng,chu: chu,empty: empty,handleAsync:handleAsync}
)(Calculator)

action-types.js：

/*
包含Counter组件的容器组件
 */
export const JIA = 'jia'
export const JIAN = 'jian'
export const CHENG = 'cheng'
export const CHU = 'chu'
export const EMPTY = 'empty'

actions.js：

import React from "react";
import {JIA,JIAN,CHENG,CHU,EMPTY} from './action-types'

export const jia = (number1,number2) => ({type:JIA,number:[number1,number2]})
export const jian = (number1,number2) => ({type:JIAN,number:[number1,number2]})
export const cheng = (number1,number2) => ({type:CHENG,number:[number1,number2]})
export const chu = (number1,number2) => ({type:CHU,number:[number1,number2]})
export const empty = () => ({type:EMPTY,number:0})

export const handleAsync = (number1,number2) => {
    return dispatch => {
        //模拟ajax请求
        setTimeout( () => {
            //执行异步代码
            dispatch(jia(number1,number2))
        },3000)
    }
}

reducers.js：

import React from "react";

import {JIA, JIAN, CHENG, CHU, EMPTY} from './action-types'

export default function calc(state=0,action) {
    switch (action.type) {
        case JIA: return state = action.number[0] + action.number[1]
        case JIAN: return state = action.number[0] - action.number[1]
        case CHENG: return state = action.number[0] * action.number[1]
        case CHU: return state = action.number[0] / action.number[1]
        case EMPTY: return state = action.number
        default: return state
    }

}

store.js

import React from "react";
import {Createstore} from 'react-redux'
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'

import calc from './reducers'

//创建store对象
const store = createStore(calc,composeWithDevTools(applyMiddleware(thunk)))
export default store

index.js

import React from "react"
import ReactDOM from 'react-dom'

import App from "./containers/app";
import {Provider} from 'react-redux'
import store from './redux/store'

ReactDOM.render(<Provider store={store}>
    <App/>
</Provider>,document.getElementById('root'))

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <title>React App</title>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

大致界面是这样的，有兴趣可以操作下，本人水平有限，有错望指正。只实现了异步的加法，其他类推。