react中redux的原理理解以及基本使用

redux的使用：

1、我们来讲解以下这个redux的原理图：

React Components  =======》 吃饭的顾客
Action Creators =======》 服务员
Store =======》 饭店的老板（重中之重）
Reducers =======》 后厨

（1）、顾客到饭店里面，开始对着服务员说了很多废话（今天心情很好，天气很好等），最后才说了一句，要一份回锅肉套饭；
（2）、服务员直到最后才把顾客讲的话总结=》（要一份回锅肉套饭）do What，然后服务员把总结好的点餐信息汇总给老板下单；
（3）、老板接收到下单信息之后，就把下单的详细信息传递给后厨，让他根据顾客的下单信息来出菜；
（4）、后厨根据下单信息来出菜，并且判断这位顾客之前是否下过单，如果下过单，就把两次的下单信息合并，做好菜并把菜传递给老板；
（5）、老板就叫顾客来取餐；

2、我们来开始redux之旅

（1）、首先我们应该创建一个为组件服务的reducer，reducer的本质就是一个函数；该函数接受到两个参数，分别为之前的状态（preState）与操作（action）;

//抛出reducer对象
export default function countReducer(preState = 0,action){
	//当没有传入preState时，就是当第一次初始状态时，preState的值为0
	// 解构赋值从action对象中获取type，data
	const {type,data} = action;
	switch (type) {
		case 'increment':
			return preState + data;
		case 'decrement':
			return preState - data;
		default:
		//当初始化操作时，直接返回preState = 0
			return preState;
	}
}

（2）、创建store对象并抛出

// 引入createStore,专门用于创建redux中最为核心的store对象
import { createStore } from "redux";
// 引入为count服务的reducer
import countReducer from './count_reducer';
//暴露store
export default createStore(countReducer)

(3)、为react组件生成action对象，也就是创建action creator

/*
该文件专门为count组件生成action对象
*/
export const createIncrementAction = data=>({type:'increment',data});
export const createDecrementAction = data=>({type:'decrement',data});

(4)、在react组件中使用redux

//获取reducer返回的状态
store.getState()

//使用store的dispatch方法，并且使用生成action的方法
store.dispatch(createIncrementAction(value*1))

// 在index.js中添加该段代码
//可以监听只要store中的值发生变化，就会更新视图
store.subscribe(()=>{
	ReactDOM.render(<App></App>,document.getElementById('root'))
})

综上，redux的基本使用就差不多啦。