react中怎么使用react-redux，以及异步的操作

react中怎么使用react-redux，以及异步的操作

 

### react-redux的使用 > 提醒:react-redux不支持异步操作,想支持则需要引入中间件 redux-thunk

1.在src 创建redux,redux包含store.js,reducers.js,actions.js,action_type.js

store.js

    import React from 'react';

    import {createStore,applyMiddleware} from 'redux'
    import thunk from 'redux-thunk'
    import {counter} from './reducers.js'
    const store = createStore(
        counter,
        applyMiddleware(thunk) //应用上异步的中间件
        ); //内部第一次调用reducer函数得到初始的state
    // console.log(store,store.getState())

    export default store

actions.js

import {INCREMENT,DECREMENT} from './action_type'

//增加
export const incrementCreator =(number) => ({type:INCREMENT,data:number})

//减少
export const decrementCreator =(number) => ({type:DECREMENT,data:number})

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

reducers.js

import {INCREMENT,DECREMENT} from './action_type.js'
export const counter = (state =0,action) =>{
    console.log('counter',state,action)
    switch (action.type) {
        case INCREMENT:
            return state + action.data

     case DECREMENT:
            return state - action.data
            
        default:
           return state
    }

}

2.在src创建 containers文件夹,里面是app.jsx

app.jsx

    import React from 'react';
    import {connect} from 'react-redux'
    import  {incrementCreator,decrementCreator,incrementAsync} from '../redux/actions'
    import Counter from '../components/counter'
    export default connect(
        state => ({count: state}),
        {increment:incrementCreator,decrement:decrementCreator,incrementAsync:incrementAsync}
    )(Counter)

src > compontents > counter.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types'

export default class Counter extends Component {

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

    increment = () =>{
        
        //1.得到选择增加数量
        const number = this.selsectVal.value*1
        this.props.increment(number)

    }

    decrement =() =>{

          //1.得到选择减少数量
        const number = this.selsectVal.value*1

        this.props.decrement(number)

    }

    incrementIfOdd =() =>{
          //1.得到选择增加数量
          const number = this.selsectVal.value*1;
          console.log(this.props)

          //2.得到原本的count状态
          const count = this.props.count;

          //判断,满足条件才更新状态
          if(count % 2 ===1){ //是奇数
        
            this.props.increment(number)

        }

    }

    incrementAsync =() =>{

         //1.得到选择增加数量
         const number = this.selsectVal.value*1

         this.props.incrementAsync(number)

        //  setTimeout(() => {

        //   this.props.increment(number)
  
        //  }, 200);


    }

    render(){
        const {count} = this.props;
        // console.log(count)
        return (
            <div>
                <p>click {count} times</p>

                <div>
                    <select ref={val => this.selsectVal = val}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;

                    <button onClick={this.increment}>+</button>&nbsp;
                    <button onClick={this.decrement}>-</button>&nbsp;
                    <button onClick={this.incrementIfOdd}>increment if odd</button>&nbsp;
                    <button onClick={this.incrementAsync}>increment async</button>

                </div>
            </div>
        )
    }
}

4.src > index.js

import React from 'react';
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'

import App from './containers/app.jsx'
import store from './redux/store'

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