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

前言

  • ReduxReact 最常见的 集中状态管理工具 ,类似于 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
相关推荐
yanlele9 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子1 小时前
React状态管理最佳实践
前端
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt2 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜3 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构