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)


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鸥总

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值