Redux的原理与用法

Redux是什么？

  redux 是一个独立专门用于JS 库的可预测的状态管理容器，可以在 react, angular, vue 项目中使用。

Redux怎么用？

   Redux 中提出了单一数据源 Store 用来存储状态数据，所有的组建都可以通过 Action 修改 Store，也可以从 Store 中获取最新状态。使用了 redux 就可以完美解决组建之间的通信问题。

核心概念

• Store：保存数据的地方，你可以把它看成一个容器，整个应用只能有一个Store。
• State：Store对象包含所有数据，如果想得到某个时点的数据，就要对Store生成快照，这种时点的数据集合，就叫做State。
• Action：State的变化，会导致View的变化。但是，用户接触不到State，只能接触到View。所以，State的变化必须是View导致的。Action就是View发出的通知，表示State应该要发生变化了。
• Action Creator：View要发送多少种消息，就会有多少种Action。如果都手写，会很麻烦，所以我们定义一个函数来生成Action，这个函数就叫Action Creator。
• Reducer：Store收到Action以后，必须给出一个新的State，这样View才会发生变化。这种State的计算过程就叫做Reducer。Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State。
• dispatch：是View发出Action的唯一方法。

工作流程

1、首先，用户（通过View）发出Action，发出方式就用到了dispatch方法。

2、然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回新的State

3、State一旦有变化，Store就会调用监听函数，来更新View。

示例

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

//count_reducer.js
/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	// console.log(preState);
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case 'increment': //如果是加
			return preState + data
		case 'decrement': //若果是减
			return preState - data
		default:
			return preState
	}
}

// 组件里
increment = ()=>{
	const {value} = this.selectNumber
	store.dispatch({type:'increment',data:value*1})
}