react学习——26react-redux实现求和案例（完整版）

1、目录结构

2、components/count/index.js

import React, {Component} from "react";
export default class Count extends Component {
    //加法
    increment=()=>{
        const {value} = this.selectNum
        this.props.jia(Number(value))
     }
     //减法
    decrement=()=>{
        const {value} = this.selectNum
        this.props.jian(Number(value))
     }
     //奇数加
    incrementIfOdd=()=>{
        const {value} = this.selectNum
        const {count} = this.props
        if(count%2!==0) {
            this.props.jia(Number(value))
        }
     }
     //异步加
    incrementAsync=()=>{
        const {value} = this.selectNum
        this.props.jiaAsync(Number(value),500)
     }
    render()
    {
        console.log('UI组件接收到的props是',this.props)
        return(
            <div>
               <h1>当前求和为：{this.props.count}</h1>
                <select ref={(c)=>this.selectNum=c}>
                    <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}>当前求和为奇数在加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;
            </div>
        );
    }
}

3、containers/Count/index.js

//引入Count的UI组件
import CountUI from '../../components/Count'
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/count_action'
//引入conect用于链接UI组件与redux
import {connect} from 'react-redux'
//mapStateToProps函数的返回的对象中的key就作为传递给组件的props的key，value就作为传递给组件的props的value----状态
function mapStateToProps(state){
    return {count:state}
}
function mapDispatchToProps(dispatch){
    return {
        jia:data=>dispatch(createIncrementAction(data)),
        jian:data=>dispatch(createDecrementAction(data)),
        jiaAsync:(data,time)=>dispatch(createIncrementAsyncAction(data,time))
    }
}
//使用connect()()创建
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

4、redux/constant.js

/*
    该模块用于定义状态管理的常量名称,目的只有一个:便于管理的同时，防止程序员单词拼写错误
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

redux/count_action.js

/*
    该文件专门为Count组件生成action对象
 */
import {INCREMENT,DECREMENT} from './constant'
import store from "./store";
// function createIncrementAction(data){
//     return {type:'increment',data}
// }
export const createIncrementAction = data=>({type:INCREMENT,data})
// function createDecrementAction(data){
//     return {type:'decrement',data}
// }
//同步action,就是形参为data，返回值为action对象
export const createDecrementAction = data=>({type:DECREMENT,data})

// export default {
//     createIncrementAction,
//     createDecrementAction
// }
//所谓的异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的
export const createIncrementAsyncAction = (data,time)=>{
    return ()=>{
        setTimeout(()=>{
            //通知redux
            store.dispatch(createIncrementAction(data))
        },time)
    }
}

redux/count_reducer.js

/*
    1.该文件是用于创建一个为count服务的reducer，reducer的本质就是一个函数
    2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from "./constant";
const initState = 0
export default function countReducer(preState=initState,action) {
    console.log('countReducer',preState,action)
    const {type,data} = action
    // 根据type决定如何加工数据
    switch (type){
        case INCREMENT:
            console.log('@')
            return preState + data
        case DECREMENT:
            return preState - data
        default:
            return preState
    }
}

redux/store.js

/*
    该文件专门用于创建一个为Count组件服务的store对象
 */
//引入createStore,专门创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入cunter.redux.js文件
import countReducer from './count_reducer'
//引入redux-thunk用于支持异步action
import {thunk} from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))

5、src/App.js

import React, {Component} from "react";
import Count from "./containers/Count";
//引入store
import store from "./redux/store";
export default class App extends Component {
    render()
    {
        return(
            <div>
                <Count store={store}></Count>
            </div>
        );
    }
}

src/index.js

import React from "react";
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
ReactDOM.render(<App/>,document.getElementById('root'))
//监测redux状态变化
store.subscribe(()=>{
    ReactDOM.render(<App/>,document.getElementById('root'))
})