redux的基本使用,包括了异步action，这里就简单的用一个js文件

redux的基本使用,包括了异步action，这里就简单的用一个js文件

 

### redux的基本使用,包括了异步action，这里就直接一个js搞定

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {createStore,applyMiddleware} from 'redux'

import thunk from 'redux-thunk'

const reducer = (state=0,action) =>{
    switch (action.type) {
        case "add":
            return state + action.data

        case "decrement":
            return state - action.data

        default:
           return state 
          
    }

}

const add =(number) => ({type:'add',data:number})
const decrement =(number) => ({type:'decrement',data:number})


//异步action
const incrementAsync =(number) =>{
    return (dispatch) =>{
        //异步代码
        setTimeout(() => {
            //1s 之后分发一个增加的action
            dispatch(add(number))
            
        }, 1000);
    }
}


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

 class Counter extends Component {

     add = (number) =>{
        //通过仓库的dispatch进行修改数据
        store.dispatch(add(number))
        // console.log(store)
    }

     decrement= (number) =>{
        //通过仓库的dispatch进行修改数据
    
        store.dispatch(decrement(number))
        // console.log(store.getState());
    
    }

    addAsync =(number) =>{
        store.dispatch(incrementAsync(number))
      
    }
    

    render(){
        let state= store.getState();
        console.log(state)
        return (
            <div>
                <h1>计数数量：{state}</h1>
                <button onClick={() => this.add(1)}>加1</button>
                <button onClick={() => this.decrement(1)}>减1</button>
                <button onClick={() => this.addAsync(2)}>异步加2</button>

            </div>
        )
    }

}


ReactDOM.render(<Counter ></Counter>,document.getElementById('root'));

store.subscribe(() =>{
    ReactDOM.render(<Counter ></Counter>,document.getElementById('root'));

})