前言

Redux 是 React 最常见的 集中状态管理工具 ，类似于 Vue 中的 Pinia(Vuex)，可以独立于框架运行；
❗ 注意：
- Redux虽然是React中的东西，但是它不跟React绑定，能够单独跑起来；
作用：
- 通过集中管理的方式管理应用的状态；

一、Redux 快速体验（单独使用）

使用步骤 ：

定义一个 reducer函数（根据当前想要做的修改返回一个新的状态）；

使用 createStore方法 传入 reducer函数 ，生成一个 store实例；

使用 store实例 的 subscribe方法 订阅数据的变化 （数据一旦发生变化，可以得到通知）；

subscribe方法作用：一旦对数据进行修改，会立刻得到一个通知，直到数据什么发生了变化；

使用 store实例 的 dispatch方法提交 action 对象 ，触发数据变化（告诉 reducer 你想怎么修改数据）；

调用 dispatch 方法是为了触发数据的变化；

修改数据的唯一方法就是调用 dispatch方法，提交一个action对象；

使用 store实例 的 getStore方法 获取最新的状态数据 更新到视图中；

代码展示：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 240px;
      margin: 100px auto;
    }

    button {
      width: 50px;
      height: 50px;
      margin: 0 20px;
      font-size: 30px;
    }

    span {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div>
    <button id="decrement">-</button>
    <span id="count">0</span>
    <button id="increment">+</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>

  <script>
    // 1、自定义 reducer 函数
    // 作用：根据不同的action对象，返回不同的新的state
    /** 
     * state：管理的数据初始状态
     * action：是一个对象，里面有个type属性，标记当前想要做什么样的修改
     * 返回值：新的状态对象
     * 注意：reducer 函数必须是一个纯函数，即给定固定的输入，必须返回固定的输出
     */
    function reducer(state = { count: 0 }, action) {
      // 数据不可变，基于原始的状态生成一个新的状态
      // 不能对原始状态进行修改
      if (action.type === 'INCREMENT') {
        return { count: state.count + 1 }
      }
      if (action.type === 'DECREMENT') {
        return { count: state.count - 1 }
      }
      // 以上两个条件都不满足，原样返回 state
      return state;
    }

    // 2、使用 Redux.createStore()方法，传入 reducer 函数生成 store 实例
    const store = Redux.createStore(reducer);

    // 3、通过 store实例 的 subscribe方法 订阅数据的变化
    // 回调函数在每次state发生变化的时候自动执行
    store.subscribe(() => {
      document.querySelector('#count').innerText = store.getState().count;
    });

    // 4、通过 store实例 的 dispatch方法 提交 action 对象更改状态
    // 更改数据的方式，有且仅有这一种
    const inBtn = document.querySelector('#increment')
    // +
    inBtn.addEventListener('click', function () {
      store.dispatch({ type: 'INCREMENT' });
    });

    const dBtn = document.querySelector('#decrement')
    // -
    dBtn.addEventListener('click', function () {
      store.dispatch({ type: 'DECREMENT' });
    });

    // 5、通过 store实例 的 getState 获取最新状态更新到视图中

  </script>
</body>

</html>

二、Redux管理数据流程梳理

为了职责清晰，数据流向明确，Redux把整个数据修改的修改分为三个核心概念 ：
- state ：
  - 一个对象，存放着我们管理的 数据状态；
- action ：
  - 一个对象，用来描述你想怎么 修改数据；
- reducer ：
  - 一个函数，根据 action 的描述生成一个 新的state；

React全家桶 - 【Redux】 - 快速体验（独立于React单独使用）

前言

一、Redux 快速体验（单独使用）

二、Redux管理数据流程梳理