1、目录结构

2、components/count/index.js

import React, {Component} from "react";
export default class Count extends Component {//加法increment=()=>{const {value} = this.selectNumthis.props.jia(Number(value))}//减法decrement=()=>{const {value} = this.selectNumthis.props.jian(Number(value))}//奇数加incrementIfOdd=()=>{const {value} = this.selectNumconst {count} = this.propsif(count%2!==0) {this.props.jia(Number(value))}}//异步加incrementAsync=()=>{const {value} = this.selectNumthis.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(()=>{//通知reduxstore.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 + datacase DECREMENT:return preState - datadefault: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'))
})