Redux持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情 Redux 一

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

Redux

一个专为JS应用设计的可预期的状态容器，简单来说 Redux 是一个可预测的状态容器。

State

state 直译过来就是状态，它就是一个变量，一个用来记录（组件）状态的变量。组件可以根据不同的状态值切换不同的显示。

例如用户登录和没登录看到的状态应该是不同的，那么用户的登录与否就应该是一个状态。

容器

状态容器即用来保存状态的容器。状态多了，自然需要一个东西来存储，但是容器的功能却不是仅仅能存储状态，它实际上是一个状态管理器，除了存储状态外，它还可以用来对 state 进行查询、修改等操作。

可预测的

可预测是指我们在对 state 进行各种操作时，其结果是一定的。即以相同的顺序对 state 执行相同的操作会得到相同的结果。

简单来说，Redux 中对状态的所有操作都封装到了容器内部，外部只能通过调用容器的方法来操作 state，而不能直接修改 state。

这就意味着外部对 state 的操作都被容器所限制，对 state 的操作都在容器的掌控之中，这就是可预测。

总的来说，Redux 是一个稳定的、安全的状态管理器。

小结

Redux 可以理解为是 reducer 和 context 的结合体，使用 Redux 即可管理复杂的 state，又可以在不同的组件间方便的共享传递 state。

当然，Redux 主要使用场景依然是大型应用。大型应用中状态比较复杂，如果只是使用 reducer 和 context，开发起来并不是那么便利，此时有一个功能强大的状态管理器就变得尤为重要。

使用

引入 redux 核心包
1. 网页中：<script src="https://unpkg.com/redux@4.2.0/dist/redux.js"></script>
创建 reducer 整合函数
通过 reducer 对象创建 store
对 store 中的 state 进行订阅
通过 dispatch 派发 state 的操作指令

state 表示当前 state，可以根据这个 state 生成新的 state

action 是一个 js 对象，它里面会保存操作的信息

function reducer(state = { count: 1 }, action) {
  switch(action.type) {
    case "ADD": return { ...state, count: state.count + 1 };
    case "SUB": return { ...state, count: state.count - 1 };
    case "ADD_N": return { ...state, count: state.count + action.payload };
    default: return state;
  } 
}

const store = Redux.createStore(reducer)
// 订阅
store.subscribe(() => {
  // 打印state的值
  // console.log(store.getState())
  countSpan.innerText = store.getState().count
})



subBtn.addEventListener("click", () => {
  store.dispatch({type: "SUB"})
})

addBtn.addEventListener("click", () => {
  store.dispatch({type: "ADD_N", payload: 5})
})

存在问题

如果 state 过于复杂，将会非常难以维护
1. 可以通过对 state 进行分解来解决，通过创建多个 reducer，然后将其合并为一个
```
const reducer = Redux.combineReducers({
  stu: stuReducer,
  school: schoolReducer
})
const sotre = Redux.createStore(reducer)
```
state 每次操作时，都需要对 state 进行复制，然后再去修改
case 后面的常量，维护起来会比较麻烦