1、目錄結構

2、count/index.js

import React, {Component} from "react";
//引入store,用于獲取數據
import store from '../../redux/store'
//引入actionCreator 專門創建action對象
import {createDecrementAction,createIncrementAction} from '../../redux/count_action'export default class Count extends Component {state = {count:store.getState()}componentDidMount() {//監測redux中的數據的變化，只要改變，就會調用renderstore.subscribe(()=>{this.setState({count:store.getState()})})}//加法increment=()=>{const {value} = this.selectNum//通知redux 改變// store.dispatch({type:'increment',data:parseInt(value)})store.dispatch(createIncrementAction(parseInt(value)))}//減法decrement=()=>{const {value} = this.selectNumstore.dispatch(createDecrementAction(parseInt(value)))}//奇數加incrementIfOdd=()=>{const {value} = this.selectNumconst {count} = this.stateif(count%2!==0){store.dispatch(createIncrementAction(parseInt(value)))}}//異步加incrementAsync=()=>{const {value} = this.selectNumsetTimeout(()=>{store.dispatch(createIncrementAction(parseInt(value)))},500)}render(){return(<div><h1>當前求和為：{store.getState()}</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>);}}

2、redux/constant.js

/*該模塊用于定義狀態管理的常量名稱,目的只有一個:便于管理的同時，防止程序員單詞拼寫錯誤
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

redux/count_action.js

/*該文件專門為Count組件生成action對象*/
import {INCREMENT,DECREMENT} from './constant'
// function createIncrementAction(data){
//     return {type:'increment',data}
// }
export const createIncrementAction = data=>({type:INCREMENT,data})
// function createDecrementAction(data){
//     return {type:'decrement',data}
// }
export const createDecrementAction = data=>({type:DECREMENT,data})// export default {
//     createIncrementAction,
//     createDecrementAction
// }

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} from 'redux'
//引入cunter.redux.js文件
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

3、src/App.js

import React, {Component} from "react";
import Count from "./components/Count";
export default class App extends Component {render(){return(<div><Count></Count></div>);}
}

src/index.js

import React from "react";
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>,document.getElementById('root'))