Redux：一个用于集中状态管理的js库

听海边涛声

已于 2024-07-28 10:55:40 修改

阅读量155

点赞数 2

文章标签： javascript 前端开发语言 Redux

于 2024-07-28 10:52:48 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140745718

版权

什么是Redux

Redux是React最常用的集中状态管理工具，类似于Vue中的Pinia(Vuex)，可以独立于框架运行。

作用：通过集中管理的方式管理应用的状态。

Redux把整个数据修改的流程分成了三个核心概念，分别是：state、action、reducer。
在这里插入图片描述

state：是一个对象，存放着我们想管理的数据状态。
action：是一个对象，用来描述你想怎么修改数据。
reducer：是一个函数，根据action的描述生成一个新的state。

Redux官网

https://redux.js.org/
在这里插入图片描述

直接使用Redux的步骤

不和任何框架绑定，不使用任何构建工具，使用Redux的步骤：

1）定义一个reducer函数。这个函数的作用是根据当前想要做的修改，返回一个新的状态，它的目标就是更改之后返回新的状态。
2）使用Redux的createStore方法，传入reducer函数，生成一个store实例对象。有了store实例对象，才可以做下面的步骤。
3）使用store实例的subscribe方法，订阅数据的变化。这样数据一旦变化，可以得到通知。知道数据变化了，才可以做后续的事情。
4）使用store实例的dispatch方法提交action对象，触发数据变化，告诉reducer你想怎么修改数据。
5）使用store实例的getState方法，获取最新的状态数据更新到视图中。

示例

使用纯Redux实现计数器，想实现的效果如下，点击 “减1” 按钮每次减1，点击 “加1” 按钮每次加1，结果实时显示出来：
在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="decrement">减1</button>
  <span id="count">0</span>
  <button id="increment">加1</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.min.js"></script>
  <script>
    // 1. 定义reducer函数：根据不同的action对象，返回不同的新的状态
    // 第一个参数state：是管理的数据初始状态
    // 第二各参数action对象：action对象身上有type属性，type标记当前想要做什么修改
    function reducer(state = { count: 0 }, action) {
      // 根据不同的action对象，做不同的输出
      // 有个要求：数据不可变，必须基于原始状态生成一个新的状态，不能在原始的状态上直接修改
      if (action.type === 'INCREMENT') {
        return { count: state.count + 1 }
      }
      if (action.type === 'DECREMENT') {
        return { count: state.count - 1 }
      }
      return state
    }

    // 2. 使用reducer函数生成store实例
    const store = Redux.createStore(reducer)

    // 3. 通过store实例的subscribe订阅数据变化
    // 回调函数可以在每次state变化的时候自动执行
    store.subscribe(() => {
      console.log('state变化了', store.getState())
      // 5. 通过store实例的getState方法获取最新状态更新到视图中
      document.querySelector('#count').innerHTML = store.getState().count
    })

    // 4. 通过store实例的dispatch函数提交action更改状态
    const inBtn = document.querySelector('#increment')
    // 增
    inBtn.addEventListener('click', () => {
      store.dispatch({
        type: 'INCREMENT'
      })
    })

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

  </script>
</body>

</html>