redux react-thunk实现异步方法

偏执的太偏执、 2021-07-25 01:38 411阅读 0赞

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