redux

一，前言

1.redux是一个状态管理器，集中管理了应用状态，并且以确定的规则来修改状态，在大型应用中切确的规则使状态的变化更易追踪。

2.不仅react可以使用redux来管理状态，其他地方若需要状态管理器都可以使用redux。

二，安装

1.使用npm管理工具安装redux：npm install redux

三，redux入口

1.redux的入口是store ：store是redux的重要概念，像一个容器仓库集中管理了所有组件的state。

2.在redux中我们使用createStore来初始化一个容器store，该函数接受一个reducers函数作为参数。

import { createStore } from 'redux';
const store = createStore({...})

3.redux是单一数据源，整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中，因此我们只需要创建一个store实例。

四，状态state和修改状态reducers

1.state是一个对象，用于定义所有状态，reducers是唯一能修改state的地方。在redux中，通常这两个写在同一个文件，因此放在一起讲。

//一个reducers.js文件示例
const initState={
	name:'ll',
	age:24,
} 
function reducers(state={...initState}, action){
	switch(action.type){
	case 'add': 
		return {...state,action.payload}
	case xxx:
		return {...state,action.payload}
}}

export default reducers

2.reducers定义了如何根据action.type来修改state，函数的第一个参数是初始状态state，第二个参数是redux另一个重要的概念action（包含改变的类型type和提交载荷payload）

3.combineReducers: 用于拆分reducers,当状态比较多，又没有关联时，我们更倾向对状态进行拆分，使代码更加清晰，combineReducers可以将拆分的reducers合并。

import {combineReducers} from 'redux';
reducers1(state={},action){
	switch(action.type){
	return {...state,...action.payload}},
}
reducers2(state={},action){
	switch(action.type){
	return {...state,...action.payload}},
}
export default combineReducers({reducer1,reducers2})

五，store实例方法

1.store.getState(): 用于生成state某个时刻的快照。

2.store.dispatch(): 用于发起一个action，action是一个对象：{type：‘xxx’,payload:{}}。其中type必须定义。

3.store.subscribe():接受一个函数listener,当state发生变化时，即会执行listener，若是在react中使用，需要在此时重新渲染view。

六，react-redux

1.为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux

2.在react-redux中store的定义和原生redux一样，但是提供了高阶函数connect和组件Provider将store状态和ui组件关联起来

3.connect函数函数返回一个高阶组件，用于赋予组件状态量。被connect包装的组件，props中会自动含有dispatch，match,history等属性，state需要通过mapStateToProps函数参数声明。

function mapStateToProps(state){ 
	return {...state}
} //mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

function mapDispatchToProps(dispatch,state){
	a:()=>{dispatch({type:'xxx',payload:{}})}
}
connect(mapStateToProps,mapDispatchToProps)(<App/>) //使用了connect包装的组件含有dispatch函数

4.Provider容器组件，将reducers的state和UI组件真正连接起来。

<Provider store={store}>
	<App/>
</provider>