Redux

Redux 是 React 中最常用的状态管理工具（状态容器）

好处：

• 集中式存储和管理应用的状态
• 处理组件通讯问题时，无视组件之间的层级关系
• 简化大型复杂应用中组件之间的通讯问题
• 数据流清晰，易于定位bug

核心概念：

• action（动作）：描述要做的事情
• reducer（函数）：更新状态
• store（仓库）：整合 action 和 reducer 

action

• 只描述要做的事情
• 是一个JS对象，必须带有 type 属性，用于区分动作的类型
• 根据功能不同，可以携带额外的数据，配合该动作来完成相应功能

action creator

使用函数创建 action 对象，可以动态传参

优点：简化多次使用 action 时，重复创建 action 对象

reducer

作用：

• 用来处理 action 并更新状态，是Redux 状态更新的地方
• 接收上一次的状态和 action 作为参数，根据 action 的类型，执行不同操作，最终返回新的状态

原则：

• 函数一点要有返回值，即使状态没有改变也要返回上一次的状态
• 是一个纯函数
• 不能执行JS副作用（不要直接修改当前状态，而是根据当前状态值创建新的状态值）

// prevState 上一次的状态
// action 当前要执行的动作
const reducer = (prevState, action) => {
  return newState
}

纯函数：相同的输入总是得到相同的输出

// 纯函数
const add = () => {
  return  123
}
add()  // 123

// 非纯函数
const redu = () => {
  return  Math.random()
}
redu()

JS副作用：一个函数或其他操作修改了其局部环境之外的状态变量值，那么它就被称为有副作用

// 无副作用
const add = (num1,num2) => {
  return  num1 + num2
}
add(1,2)

// 有副作用
let a = 0
const redu = (num1,num2) => {
  c = 1
  return  num1 + num2
}
redu(1,2)

store

仓库，Redux 的核心，整合 action 和 reducer

特点：

• 一个应用只有一个 store
• 维护应用的状态，获取状态： store.getState()
• 发起状态更新时，需要分发 action： store.dispatch(action)
• 创建 store 时接收 reducer 作为参数： const store = createStore(reducer)
• 订阅（监听）状态变化： const unSubscribe = store.subscribe(() => {})
• 取消订阅状态变化：unSubscribe()

// 安装 redux 提前
import { createStore } from 'redux'

// 创建 store
const store = createStore(reducer)

// 更新状态
store.dispatch(action)
store.dispatch( increment(2) )

// 获取状态
const state = store.getState()

// ---
// 其他 API

// 监听状态变化
const unSubscribe = store.subscribe(() => {
  // 状态改变时，执行相应操作
  console.log(store.getState())
})

// 取消监听状态变化
unSubscribe()

默认值

只要创建 store，那么 Redux 就会调用一次 reducer（初始化默认值）

Redux 执行过程

1. 创建 store 时，Redux 就会先调用一次 reducer，来获取到默认状态
2. 分发动作 store.dispatch(action) 更新状态
3. Redex store 调用 reducer 传入：上一次的状态和 action，计算出新的状态并返回
4. redecer 执行完毕后，将最新的状态交给 store，store 用最新的状态替换旧状态，状态更新完毕