四、reactredux（demo可对比redux）

react-redux 调用关系：

react-reduc demo

1.安装插件：npm install --save react-redux

2.创建项目：

项目模板:https://www.cnblogs.com/lixiuming521125/p/16698004.html

demo 效果还是和redux的demo是一样的

 demo目录结构：

src下新增了containers文件夹：主要放容器组件；

组件分2类:

• ui组件(components): 不使用redux相关PAI

• 容器组件(containers): 使用redux相关API

　　

app.jsx:

import React from 'react';
import {connect} from 'react-redux'

import Counter from '../component/counter';
import{increment,decrement} from '../redux/actions'//等同于 import * as actions from '../redux/actions'

//connect 第一个括号把参数（即组件需要的参数 自动解构好）传入到第二个括号中的组件
export default connect(
    state=>({number:state}),//第一个state是参数，相当于执行了 这个函数 function xx (state){return {number:state}} 
    {increment,decrement}//相当于：{increment:increment,decrement:decrement} 属性值increment action名字increment
)(Counter)

store.js(固定写法)

import {createStore} from 'redux';
import {counter} from './reducers';

const store = createStore(counter);//内部会第一次调用reducer函数得到初始state
export default store;

counter.jsx:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Counter extends Component {

    static propTypes={
        number:PropTypes.number.isRequired,
        increment:PropTypes.func.isRequired,
        decrement:PropTypes.func.isRequired,
    }
   
    increment=()=>{
        debugger
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        this.props.increment(number);
    }
    decrement=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        let count = this.props.number-number;
        if(count>=0){
            this.props.decrement(number);
        }
        
    }
    incrementOdd=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        
        if(number%2 == 1){
            this.props.increment(number);
        }
    }
    incrementAsync=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        setTimeout(()=>{
            this.props.increment(number);
        },1000)
    }
    render() {
        let count= this.props.number;
        return (
            <div>
                <p>click {count} item</p>
                <div>
                    <select ref={select=>this.select=select}>
                        <option vlaue="1">1</option>
                        <option vlaue="2">2</option>
                        <option vlaue="3">3</option>
                    </select>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementOdd}>increment if odd</button>
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>

        )
    }
}

其他：

action-types.js:

export const INCREMENT='INCREMENT';

export const DECREMENT='DECREMENT';

actions.js

/**
 * 包含所有action creator
 */
import{INCREMENT,DECREMENT} from './action-types'

/** */
export const increment=(number)=>({type:INCREMENT,data:number}); 

export const decrement=(number)=>({type:DECREMENT,data:number}); 

reducers.js:

/**
 * 这是一个包含n个reducer函数的模块
 */
import{INCREMENT,DECREMENT} from './action-types' 

export  function counter(state=0,action){
    console.log(state);
    console.log(action);
switch(action.type){
    case INCREMENT:
        return state+action.data;
    case DECREMENT:
    return state-action.data;
    default:
        return state
}
}

redux的异步请求：

问题点：

1.redux默认是不能进行异步处理的（前面的demo可以，是因为在react中进行操作的）

count.jsx中的代码片段：

 incrementAsync=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        setTimeout(()=>{
            this.props.increment(number);
        },1000)
    }

需要是更改为如下，即 直接使用redux的异步方法；

 incrementAsync=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
    this.props.incrementAsync(number);
    }

2.应用中又需要在redux中执行异步任务（ajax、定时器）

解决办法：

使用中间件 redux-thunk;

安装：npm install --save redux-thunk

demo修改：

store.js ：引入redux-thunk

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

//内部会第一次调用reducer函数得到初始state
const store = createStore(counter,
    applyMiddleware(thunk)//应用上异步中间件
    );
export default store;

actions.js:添加异步的action:incrementAsync

/**
 * 包含所有action creator
 */
import{INCREMENT,DECREMENT} from './action-types'

/** 
 * 同步action 返回一个对象
*/
export const increment=(number)=>({type:INCREMENT,data:number}); 

export const decrement=(number)=>({type:DECREMENT,data:number}); 

/**
 * 异步action 返回一个函数
 * @param {*} number 
 * @returns 
 */
export const incrementAsync=(number)=>{
    return dispatch=>{
        setTimeout(()=>{
            dispatch(increment(number));
        },1000)
    }
}; 

counter.jsx：修改异步方法；直接执行redux的异步方法

import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Counter extends Component {

    static propTypes={
        number:PropTypes.number.isRequired,
        increment:PropTypes.func.isRequired,
        decrement:PropTypes.func.isRequired,
        incrementAsync:PropTypes.func.isRequired
    }
   
    increment=()=>{
        debugger
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        this.props.increment(number);
    }
    decrement=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        let count = this.props.number-number;
        if(count>=0){
            this.props.decrement(number);
        }
        
    }
    incrementOdd=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        
        if(number%2 == 1){
            this.props.increment(number);
        }
    }
    incrementAsync=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        this.props.incrementAsync(number);
    }
    render() {
        let count= this.props.number;
        return (
            <div>
                <p>click {count} item</p>
                <div>
                    <select ref={select=>this.select=select}>
                        <option vlaue="1">1</option>
                        <option vlaue="2">2</option>
                        <option vlaue="3">3</option>
                    </select>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementOdd}>increment if odd</button>
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>

        )
    }
}

app.jsx:添加了异步方法后需要在connect中添加异步方法的传参

import React from 'react';
import {connect} from 'react-redux'

import Counter from '../component/counter';
import{increment,decrement,incrementAsync} from '../redux/actions'//等同于 import * as actions from '../redux/actions'

//connect 第一个括号把参数（即组件需要的参数 自动解构好）传入到第二个括号中的组件
export default connect(
    state=>({number:state}),//第一个state是参数，相当于执行了 这个函数 function xx (state){return {number:state}} 
    {increment,decrement,incrementAsync}//相当于：{increment:increment,decrement:decrement} 属性值increment action名字increment
)(Counter)

其他不变；