一、什么是Redux

redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库),它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。

作用: 集中式管理 react 应用中多个组件共享的状态

二、如何使用Redux

1. 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用
2. 某个组件的状态，需要共享
3. 某个状态需要在任何地方都可以拿到
4. 一个组件需要改变全局状态
5. 一个组件需要改变另一个组件的状态

三、Redux的三个基本组成

redux主要由三部分组成：store，reducer，action。

1.store对象：将 state,action 与 reducer 联系在一起的对象

import {createStore} from 'redux' 
import reducer from './reducer' 
const store = createStore(reducer)
1
2
3

• dispatch:
  用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步。
• subscribe:
  监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化，当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听。 let unsubscribe = store.subscribe(() => {console.log(‘state发生了变化’)})
• getState:
  获取store中的state——当我们用action触发reducer改变了state时，需要再拿到新的state里的数据，毕竟数据才是我们想要的。getState主要在两个地方需要用到，一是在dispatch拿到action后store需要用它来获取state里的数据，并把这个数据传给reducer，这个过程是自动执行的，二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据，如果做到这一步，说明我们已经成功了。
• replaceReducer:
  替换reducer，改变state修改的逻辑。

store对象扩展功能
getState(): 得到 state
dispatch(action): 分发 action, 触发 reducer 调用, 产生新的 state
subscribe(listener): 注册监听, 当产生了新的 state 时, 自动调用

2.action：标识要执行行为的对象

action是一个对象，其中type属性是必须的，同时可以传入一些数据。action可以用actionCreactor进行创造。dispatch就是把action对象发送出去。

属性:
type:标识属性, 值为字符串, 唯一, 必要属性
xxx: 数据属性, 值类型任意, 可选属性
使用: const action = { type: ‘INCREMENT’, data: 2 }

3.reducer：返回一个新的状态

reducer是一个函数，它接受一个state和一个action，根据action的type返回一个新的state。根据业务逻辑可以分为很多个reducer，然后通过combineReducers将它们合并，state树中有很多对象，每个state对象对应一个reducer，state对象的名字可以在合并时定义。

export default function counter(state = 0, action) { 
	switch (action.type) { 
		case 'INCREMENT': 
			return state + action.data 
		case 'DECREMENT': 
			return state - action.data 
		default: return state 
} }
1
2
3
4
5
6
7
8