Redux的理解与使用

一.什么是Redux？

Redux是一个第三方状态管理的js库，它不仅仅可以适用于react框架，还可以用于其他的vue，auglar等框架。只不过react的生态中不包括一个状态管理的库而已，所以与react配合使用较为好。

二.神魔时候要使用Redux来管理状态

当我们多个组件共享状态的时候最好使用Redux来管理，方便组件间数据的共享。当咱们没有涉及组件间数据共享的时候尽量不要使用Redux

二.Redux的三个核心要素

1. actions

actions可以说是一个让reducer执行不同函数的supporter， 它为reducer传入type来让reducer来执行不同的修改数据方式，并且把data传给reducer。所以actions的类型要是一个对象，并且咱们可以把actions抽离出去封装到一个工厂函数中如下：

/*./redux/actions.js*/
export const increament = (num)=> {
	return {
		type: 'INCREAMENT', //type属性由于要跟reducer中的相同所以我们可以把它抽离出去./redux/actions-type.js
		data: num
	}
}

2.reducer

reduce是一个返回state的纯函数，里头要对state的值进行处理。

/*./redux/reducer.js*/
export default count = (state=0, action)=> {   //state需要在这里直接赋予默认值，因为每个状态都有初始状态
switch (action.type) {
	case "INCREMENT":
		return state + 1
	default:
		return state
}
}

3.Store

store是一个连接state，reducer的仓库，其中提供了三种api供我们来操作

• store.getState() : 用来获取仓库中数据，返回state
• store.dispitch(action): 用来调用reducer来修改state， action需要传入的类型是一个对象
• store.subscribe(()=> {}): 当store中的数据改变时会进行调用， 由于store中数据改变不会使页面重新渲染，所以我们在入口文件中可以把reactDom.render（）放入其中来实现类似于数据响应式的作用。

/*./redux/store.js*/
import {createStore} from 'redux'
import reducer from './reducer.js/
export const count = createStore(reducer)
//然后在index.js的入口文件中引入，通过属性赋值传递给需要的组件