求和案例（react+react-redux版本）

文章目录 求和案例入口文件index.js入口组件App.jsredux/constant.jsredux/action.jsredux/reducer.jsredux/store.jsCounterContainer/index.jsx（容器组件）mapDispatchToProps的简写 Counter/index.jsx（UI组件） react-redux相关链接

求和案例

首先，得安装react-redux（npm install --save react-redux）。

本篇将涉及的文件有：

入口文件index.js入口组件App.jsredux/constant.jsredux/action.jsredux/reducer.jsredux/store.jscontainers/CounterContainer/index.jsx，即容器组件。components/Counter/index.jsx，即UI组件。 入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />,document.getElementById("root"));

入口组件App.js

import React, { Component } from 'react'
import CounterContainer from "./containers/CounterContainer";
import store from "./redux/store.js";

export default class App extends Component {
  render() {
    return (
      <div>
        <CounterContainer store={store}/>
      </div>
    )
  }
}

redux/constant.js

export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';

redux/action.js

import { INCREMENT,DECREMENT } from "./constant"

export const createIncrementAction = data => ({type:INCREMENT,data});
export const createDecrementAction = data => ({type:DECREMENT,data});

export const createIncrementAsyncAction = (data,time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data));
        },time)
    }
}

redux/reducer.js

import { INCREMENT,DECREMENT } from "./constant";

const initState = 0

export default function reducer(preState=initState,action){
    const {type,data} = action;

    switch(type){
        case INCREMENT: return preState+Number(data);
        case DECREMENT: return preState-Number(data);
        default: return preState
    }
}

redux/store.js

import { createStore,applyMiddleware} from "redux";
import thunk from "redux-thunk";
import counterReducer from "./reducer.js";

export default createStore(counterReducer,applyMiddleware(thunk));

CounterContainer/index.jsx（容器组件）

import Counter from "../../components/Counter";
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from "../../redux/action.js";

import { connect } from "react-redux";

const mapStateToProps = state => ({count:state})

const mapDispatchToProps = dispatch => ({
    jia: data => (dispatch(createIncrementAction(data))),
    jian: data => (dispatch(createDecrementAction(data))),
    jiaAsync: (data,time) => (dispatch(createIncrementAsyncAction(data,time)))
})
export default connect(mapStateToProps,mapDispatchToProps)(Counter);

const mapStateToProps = (state) => ({})

mapStateToProps是一个函数，返回一个对象。容器组件向UI组件传递状态：state。

const mapDispatchToProps = (dispatch) => ({})

mapDispatchToProps是一个函数，返回一个对象。容器组件向UI组件传递 *** 作状态的方法：dispatch。

connect(mapStateToProps,mapDispatchToProps)(UI组件) 返回的结果是 容器组件。

mapDispatchToProps的简写

mapDispatchToProps也可以是一个对象，如下。生成action后，react-redux会自动分发（dispatch）。

import Counter from "../../components/Counter";
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from "../../redux/action.js";

import { connect } from "react-redux";


const mapStateToProps = (state) => ({count:state})

const mapDispatchToProps = {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction
}

export default connect(mapStateToProps,mapDispatchToProps)(Counter);

Counter/index.jsx（UI组件）

import React, { Component } from 'react'

export default class Counter extends Component {

    increment = () => {
        const {value} = this.selectEl;
        this.props.jia(Number(value));
    }
    decrement = () => {
        const {value} = this.selectEl;
        this.props.jian(Number(value));
    }
    incrementOdd = () => {
        const {value} = this.selectEl;
        if(this.props.count % 2 !== 0){
            this.props.jia(Number(value));
        }
    }
    incrementWait = () => {
        const {value} = this.selectEl;  
        this.props.jiaAsync(Number(value),1000)
    }

  render() {
    const {increment,decrement,incrementOdd,incrementWait} = this;
    return (
        <div>
            <h2>当前求和为{this.props.count}</h2>
            <select ref={c => this.selectEl = c}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>&nbsp;
            <button onClick={increment}>+</button>&nbsp;
            <button onClick={decrement}>-</button>&nbsp;
            <button onClick={incrementOdd}>和为奇数时加</button>&nbsp;
            <button onClick={incrementWait}>等一等再加</button>
        </div>
    )
  }
}

react-redux

所有UI组件都被一个容器组件包裹，容器组件、UI组件是父子关系。
真正和redux打交道的是容器组件，容器组件可以使用redux的API。
UI组件不能使用redux的API。
容器组件通过props向容器组件传递：redux中保存的状态、 *** 作状态的方法。

相关链接

求和案例（纯react版本）
求和案例（redux精简版）
求和案例（redux完整版）
求和案例（redux完整版）（异步action）