redux react-thunk实现异步方法

redux默认不支持异步,需要插件才能实现
	cnpm install --save redux-thunk

1、在store.js中,引入中间件,并使用

	import {createStore,applyMiddleware} from 'redux';
	import thunk from 'redux-thunk'
	const store=createStore(counter,applyMiddleware(thunk))

2、在action-type中定义action常量名,并设置与异步状态相关的同步action

	export const xx=(参数)=>{return dispatch=>{
	    异步操作,获取数据后调用同步方法改变状态
	    dispatch(同步action方法(参数))
	}}

3、引入对应的变量名等操作...

代码示例;
actions.js

/*
创建action的函数
*/

import { INCREMENT,DECREMENT } from "./action-type";

//同步action返回对象
export const increment=(num)=>({type:INCREMENT,data:num})
export const decrement=(num)=>({type:DECREMENT,data:num})
//异步action返回函数
export const incrementAsync=(num)=>{return dispatch=>{
    setTimeout(()=>{
        dispatch(increment(num))
    },1000)
}}

store.js:

import {createStore,applyMiddleware} from 'redux';
import  {counter} from './reducers'
import thunk from 'redux-thunk'

const store=createStore(counter,applyMiddleware(thunk))//第二个参数指定应用上的中间件
console.log(store);

export default store;

App.js:

import React from 'react';
import './App.css';
import {increment,decrement,incrementAsync}  from './redux/actions'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'

class App extends React.Component{

  static propTypes={
    count:PropTypes.number.isRequired,
    increment:PropTypes.func.isRequired,
    decrement:PropTypes.func.isRequired,
    incrementAsync:PropTypes.func.isRequired
  }


  increment = () => {
    const num = this.refs.numSelect.value*1
    // this.props.store.dispatch(actions.increment(num));
    this.props.increment(num);
  }

  decrement = () => {
    const num = this.refs.numSelect.value*1
   
    // this.props.store.dispatch(actions.decrement(num))
    this.props.decrement(num);
  }

  incrementIfOdd = () => {
    const num = this.refs.numSelect.value*1
    // const count=this.props.store.getState();
    const count=this.props.count

    if(count%2==1) {
      this.props.increment(num);
    }
  }

	//异步调用
  incrementAsync = () => {
    const num = this.refs.numSelect.value*1
    this.props.incrementAsync(num);
  }

  render () {
    // const count = this.props.store.getState()

    const count =this.props.count;

    return (
      <div>
        <p>
          click {count} times {' '}
        </p>
        <select ref="numSelect">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>{' '}
        <button onClick={this.increment}>+</button>{' '}
        <button onClick={this.decrement}>-</button>{' '}
        <button onClick={this.incrementIfOdd}>increment if odd</button>{' '}
        <button onClick={this.incrementAsync}>increment async</button>
      </div>
    )

  }

}

export default connect(
  state=>({ count:state }),
  {increment,decrement,incrementAsync}
)(App); //connect()返回一个类,第一次参数为函数,第二个参数为对象,接收参数是App组件

//第一个参数根据redux中的状态,创建变量来接收,变量也会被解构放入App标签,当作组件参数传递
//第二个参数中的内容,会被...解构当作参数传递给组件App