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
相关推荐
打不着的大喇叭44 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠1 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github