redux

最新推荐文章于 2024-08-31 21:50:03 发布
最新推荐文章于 2024-08-31 21:50:03 发布
阅读量37 收藏
点赞数
分类专栏： React学习系列 文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35741972/article/details/130008667
版权

React的学习系列之Redux

Redux的官网

什么是 Redux ？

Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理！Redux 除了和 React 一起用外，还支持其它框架；它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态！Redux 提供的模式和工具使您更容易理解应用程序中的状态何时、何地、为什么以及如何更新，以及当这些更改发生时，您的应用程序逻辑将如何表现！

什么时候应该用 Redux ？

  • 在应用的大量地方，都存在大量的状态
  • 应用状态会随着时间的推移而频繁更新
  • 更新该状态的逻辑可能很复杂
  • 中型和大型代码量的应用，很多人协同开发

Redux 库和工具

Redux 是一个小型的独立 JS 库， 但是它通常与其他几个包一起使用：React-Redux是我们的官方库，它让 React 组件与 Redux 有了交互，可以从 store 读取一些 state，可以通过 dispatch actions 来更新 store！Redux ToolkitRedux Toolkit 是我们推荐的编写 Redux 逻辑的方法。 它包含我们认为对于构建 Redux 应用程序必不可少的包和函数。 Redux Toolkit 构建在我们建议的最佳实践中，简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序变得更加容易。Redux DevTools 拓展Redux DevTools Extension 可以显示 Redux 存储中状态随时间变化的历史记录，这允许您有效地调试应用程序。

Redux基础工作流

Redux 的原理

在这里插入图片描述

当我们知道了Redux的底层原理后，接下来我们来实现一个mini版本的Redux

mini-Redux的实现和应用

  1. 创建一个React的项目==（基于vite构构建)==

    yarn vite

目录
src                   
├─ assets             
│  └─ react.svg       
├─ store              
│  ├─ index.js                 
├─ App.css            
├─ App.jsx               
├─ index.css          
└─ main.jsx

  2. reduct中的createStore方法的解析

    方法中有一个state存储公共的状态，还有一个listeners事件池「集合」，已经三个方法和一个形参

    store/index.

    基础的结构

    export const createStore = reducer => {
  /* 存储公共状态 */
  let state;
  /* 存放事件池 */
  let listeners = [];

  /* 获取公共状态 */
  const getState = () => state;

  /* 像事件池添加组件更新的方法 */
  const subscribe = listener => {
  };

  /* 派发任务通知 reducer 执行 */
  const dispatch = action => {
  };

  return { getState, subscribe, dispatch };
};

    首次执行createStore函数就会执行dispatch方法

    export const createStore = reducer => {
  /* 规则校验 */
  if (typeof reducer !== "function")
    throw new TypeError("reducer is not function");
  
  ...

  /* 派发任务通知 reducer 执行 */
  const dispatch = action => {
  };
  
  /* 唯一值 */
  const randomString = () =>
    Math.random().toString(32).substring(7).split("").join(".");

  /* 默认执行一次 dispatch派发，给公共状态赋值（初始值） */
  dispatch({
    type: `@@redux/INIT${randomString}`,
  });

  return { getState, subscribe, dispatch };
};

    subscribe 方法的执行

    export const createStore = reducer => {
  ...
 
 	/* 向事件池添加组件更新的方法 */
  const subscribe = listener => {
    // 规则校验
    if (typeof listener !== "function")
      throw new TypeError("listener is not Function");

    // 添加组件更新的方法
    if (!listeners.includes(listener)) {
      listeners.push(listener);
    }

    // 移除组件更新的方法
    const unsubscribe = () => {
      let index = listeners.indexOf(listener);
      listeners.splice(index, 1);
    };

    return unsubscribe;
  };
  return { getState, subscribe, dispatch };
};

    当事件行为执行时执行dispatch方法，更新公共状态并通知事件池中对应的方法执行完成后，移除方法

    const isPlainObject = obj => {
  let proto, Ctor;
  if (!obj || toString.call(obj) !== "[object Object]") return false;
  proto = Object.getPrototypeOf(obj);
  if (!proto) return true;
  Ctor = {}.hasOwnProperty.call(proto, "constructor") && proto.constructor;
  return typeof Ctor === "function" && Ctor === Object;
};

export const createStore = reducer => {
  ...
   /* 派发任务通知 reducer 执行 */
  const dispatch = action => {
    // 规则校验
    if (!isPlainObject(action)) throw new TypeError("action is not object");
    if (typeof action.type === undefined)
      throw new TypeError("Actions may not have an undefined 'type' property");

    // 执行reducer，传递:公共状态、行为对象，接收执行的返回值，替换公共状态
    state = reducer(state, action);

    // 当状态更更改，还需要把事件池中的方法执行
    listeners.forEach(listener => listener());

    return action;
  };
  return { getState, subscribe, dispatch };
};

    到此就完成了一个简单的redux,完整的代码如下：

    const isPlainObject = obj => {
  let proto, Ctor;
  if (!obj || toString.call(obj) !== "[object Object]") return false;
  proto = Object.getPrototypeOf(obj);
  if (!proto) return true;
  Ctor = {}.hasOwnProperty.call(proto, "constructor") && proto.constructor;
  return typeof Ctor === "function" && Ctor === Object;
};

export const createStore = reducer => {
  /* 规则校验 */
  if (typeof reducer !== "function")
    throw new TypeError("reducer is not function");

  /* 存储公共状态 */
  let state;
  /* 存放事件池 */
  let listeners = [];

  /* 获取公共状态 */
  const getState = () => state;

  /* 像事件池添加组件更新的方法 */
  const subscribe = listener => {
    // 规则校验
    if (typeof listener !== "function")
      throw new TypeError("listener is not Function");

    // 添加组件更新的方法
    if (!listeners.includes(listener)) {
      listeners.push(listener);
    }

    // 移除组件更新的方法
    const unsubscribe = () => {
      let index = listeners.indexOf(listener);
      listeners.splice(index, 1);
    };

    return unsubscribe;
  };

  /* 派发任务通知 reducer 执行 */
  const dispatch = action => {
    // 规则校验
    if (!isPlainObject(action)) throw new TypeError("action is not object");
    if (typeof action.type === undefined)
      throw new TypeError("Actions may not have an undefined 'type' property");

    // 执行reducer，传递:公共状态、行为对象，接收执行的返回值，替换公共状态
    state = reducer(state, action);

    // 当状态更更改，还需要把事件池中的方法执行
    listeners.forEach(listener => listener());

    return action;
  };

  /* 唯一值 */
  const randomString = () =>
    Math.random().toString(32).substring(7).split("").join(".");

  /* 默认执行一次 dispatch派发，给公共状态赋值（初始值） */
  dispatch({
    type: `@@redux/INIT${randomString}`,
  });

  return { getState, subscribe, dispatch };
};

  3. mini版本的Redux完成后我们在项目中应用

    1. 首先我们需要把公共状态放到全局上下文中，所有我们需要来创建一个上下文

      目录

      src                   
├─ assets             
│  └─ react.svg       
├─ store              
│  ├─ index.js                 
├─ App.css            
├─ App.jsx            
├─ + ThemeContext.js    
├─ index.css          
└─ main.jsx

      ThemeContext.js

      import { createContext } from 'react';
const ThemeContext = createContext();
export default ThemeContext;

      main.jsx

      import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import ThemeContext from "./ThemeContext";
import store from "./store";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ThemeContext.Provider
      value={{
        store,
      }}
    >
      <App />
    </ThemeContext.Provider>
  </React.StrictMode>
)

    2. 创建三个组件来实现业务需求

      目录结构

      src                   
├─ assets             
│  └─ react.svg       
├─ store              
│  ├─ index.js               
├─ + views              
│  + ├─ Vote.jsx        
│  + ├─ VoteFooter.jsx  
│  + └─ VoteMain.jsx    
├─ App.css            
├─ App.jsx            
├─ ThemeContext.js    
├─ index.css          
└─ main.jsx

      App.jsx

      import './App.css'
import Vote from './views/Vote'

function App() {
  return (
    <div className="App">
      <Vote />
    </div>  
  )
}

export default App

      Vote.jsx

      import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";
import ThemeContext from "../ThemeContext";
import { useContext, useState, useEffect } from "react";

const Vote = () => {
  const { store } = useContext(ThemeContext);
  const { supNum, oppNum } = store.getState();
  let [_, setRandom] = useState(0);
  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setRandom(Math.random());
    });
  }, []);

  return (
    <>
      <header className="header">
        <h2 className="title">这个是我手写的一个 Mini Redux 状态管理</h2>
        <span className="num">{supNum + oppNum}人</span>
      </header>
      <VoteMain />
      <VoteFooter />
    </>
  );
};

export default Vote;

      VoteMain.jsx

      import { useContext } from "react";
import ThemeContext from "../ThemeContext";

const VoteFooter = () => {
  const { store } = useContext(ThemeContext);

  return (
    <div className="footer">
      <button
        onClick={() => {
          store.dispatch({
            type: "VOTE_SUP",
          });
        }}
      >
        支持
      </button>

      <button
        onClick={() => {
          store.dispatch({
            type: "VOTE_OPP",
          });
        }}
      >
        反对
      </button>
    </div>
  );
};

export default VoteFooter;

      VoteFooter.jsx

      import { useContext, useEffect, useState } from "react";
import ThemeContext from "../ThemeContext";

const VoteMain = () => {
  const { store } = useContext(ThemeContext);
  const { supNum, oppNum } = store.getState();

  const [_, setRandom] = useState(0)

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setRandom(Math.random());
    })
  }, [])

  return (
    <div className="main">
      <p>支持人数：{supNum}人</p>
      <p>反对人数：{oppNum}人</p>
    </div>
  );
};

export default VoteMain;

    3. 最后执行命令启动项

      yarn dev

      在这里插入图片描述

      到此我们就已经完成了一个mini-redux的实现和应用

qq_35741972
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
redux-dev-tools
05-11
Redux DevTools 是一款针对 Redux 库的强大开发辅助工具，它为开发者提供了一个直观的方式来观察和调试应用中的状态变化。Redux 是一个广泛使用的 JavaScript 状态管理库，尤其在 React 应用中，它使得应用程序的...
Redux Demo
11-29
Redux 是一个广泛应用于JavaScript应用程序的状态管理库，尤其在React生态系统中极为常见。它提供了一种中心化的状态存储方式，使得应用中的所有组件都可以访问到共享的状态，并通过纯函数（Reducers）来更新这个...
redux-devtools工具
04-26
**Redux-DevTools：实时监控状态管理的利器** Redux，作为一个流行的状态管理库，被广泛应用于JavaScript应用，尤其是React项目中。它强制执行单一数据源和纯函数的更新，这在大型复杂应用中能带来清晰的数据流管理...
redux-demo:一个极其简单的Redux演示
05-27
从create-react-app到redux-demo项目运行地址项目运行：redux概述1、What is redux ?UI = render(state)，但是state只存在于组件内部。当页面有很多交互，有大量的组件之间的通信，那么我们仅仅使用react是极其复杂...
vue ref和reactive区别
灰海
08-25 6605
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
m0_54066656的博客
08-27 2160
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1119
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
layui栅格布局设置列间距不起作用
gc_2299的博客
08-26 939
记录layui栅格布局设置列间距不起作用的解决办法
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 299
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 684
vue.js 3
vue part 5
E___V___E的博客
08-29 849
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
echarts组件——饼图
weixin_42255789的博客
08-28 303
饼图
Nuxt3入门：样式的注入、定义和使用（第3节）
最新发布
沐爸的博客
08-31 1030
在 Nuxt3 中，如何在本地或全局注入本地样式表？如何注入本地字体？如何分发NPM的样式表？单文件组件的动态样式、作用域样式、CSS模块、预处理器如何使用？
Vue3搭建pinia环境
weixin_73060959的博客
08-28 920
在Vue 3中，Pinia 是 Vuex 的后续状态管理库，旨在提供 Vuex 5 中相似的功能，但具有更简洁的API、更好的TypeScript支持和模块热重载（HMR）等特性。
页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏
qq_37161741的博客
08-30 217
【代码】页面中存在多个iframe，根据src查找iframe，js将里面的某个class隐藏。
甘肃旅游网站研究与实现(阿龙原创设计，全网最新，旅游网站，甘肃旅游，全国旅游）✅
程序员阿龙的博客
08-29 1157
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
Electron基础(二) 进程通信的ipcMain、contextBridge、ipcRenderer
在下魔王ii的博客
08-30 922
Electron进程间的通信
Redux状态管理深入解析
"这是一份关于Redux的深入学习资料，涵盖了从基础概念到实际应用的多个方面，旨在帮助读者全面理解和掌握Redux的使用。资料中提到了Redux的基本概念、工作流程、适用场景以及核心API，并通过实例展示了如何创建和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值