react中使用redux

import React, { Component } from 'react';

//引入配置好的store,用于获取store中的初始数据 preState=0
import store from '../../redux/store.js';

//引入action，用于创建action 对象
import { createJiaAction, createJianAction } from '../../redux/count_action.js';


export default class Count extends Component {
	//初始化状态数据,
	state = { name: '邓紫棋' };

	//由于Count组件带着类型动作和数据，通过dispatch联系了reducer.js,reducer中进行操作数据，修改了数据状态，
	//但是redux不能把修改后的数据响应到页面（vuex中可以），所以需要在每次redux中状态变化时，就的调用render,重新加载dom到页面
	//需要在生命周期componentDidMount（dom挂载完毕）设置render被调用，
	componentDidMount() {
		//检测redux中状态的变化，只要变化，就调用render,
		//只要redux中的状态改变都会自动调用store.subscribe()方法，里面是个回调函数，store.subscribe:订阅redux中状态的更改
		store.subscribe(() => {
			//在react中只要用setState方法就会自动调render重新加载页面dom
			this.setState({});
		});
	}

	//加
	jia = () => {
		const { value } = this.sum;
		{/*dispatch去联系action.js，在actiono在联系reducer.js，。进行数修改*/}
		store.dispatch(createJiaAction(Number(value) ));
	};
	//减
	jian = () => {
		const { value } = this.sum;
		store.dispatch(createJianAction(Number(value) ));
	};

	//奇数加
	jiShu = () => {
		const { value } = this.sum;
		//store.getState()用于读取reducer中的数据 preState
		const count = store.getState();
		if (count % 2 !== 0) {
			store.dispatch(createJiaAction(Number(value) ));
		}
	};

	//异步加
	yiBu = () => {
		const { value } = this.sum;
		setTimeout(() => {
			store.dispatch(createJiaAction(Number(value) ));
		}, 500);
	};
	render() {
		const { Counm } = this.state;
		return (
			<div>
				{/*store.getState()方法读取count_reducer.js定义的初始值 preState*/}
				<h1>当前求和为:{store.getState()}</h1>
				<select
					ref={(a) => {
						this.sum = a;
					}}
				>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>
				<button onClick={this.jia}>+</button>
				<button onClick={this.jian}>-</button>
				<button onClick={this.jiShu}>当前求和为奇数再加</button>
				<button onClick={this.yiBu}>异步加</button>
			</div>
		);
	}
}

constant.js
//该模块是用于定义action对象中type类型的常量值,目的只有一个:便于管理的同时防止程序员单词写错
export const JIA ='jia'
export const JIAN ='jian'

count_action.js
/*
该文件专门为Count组件生成了action对象
*/

//引入常量文件
import {JIA,JIAN} from './constant.js';

export const createJiaAction=(data)=>{
     return {type:JIA,data}
} 
//简写:const createJiaAction=data=>({type:JIA,data} )

export const createJianAction=(data)=>{
    //data操作的数据
    return {type:JIAN,data}
} 
//简写:const createJianAction=data=>({type:JIAN,data} )

count_reducer.js
//该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
// reducer函数会接到两个参数（和Vue中的mutations基本相似）:之前的状态或初始的状态（preState）,动作对象（action）
//当perState为初始的状态时，值为undefined

//引入常量文件
import { JIA, JIAN} from './constant.js';

export default function countReducer(preState, action) {

      //定义初始数据。当preState ===undefined,说明在初始状态，则定义被操作数据的初始值
      if (preState === undefined) preState = 100

      //从action对象中获取：type:本次动作类型,data：操作的数据
      const { type, data } = action
      console.log(type, data)
      //根据type决定如何加工数据
      switch (type) {
            //如果type是加
            case JIA:
                  return preState + data
                  //如果type是减
            case JIAN:
                  return preState - data
                  //否侧
            default:
                  return preState
      }

}

store.js
/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//1.安装redux:npm add redux
//2.引入creatStore.专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//3.引入为Count组件服务的reducer
import countReducer from './count_reducer'
//4.暴露store
export default createStore(countReducer)