”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > Redux 指南:用于 JavaScript 应用程序的强大状态管理库

Redux 指南:用于 JavaScript 应用程序的强大状态管理库

发布于2024-07-30
浏览:649

Guide to Redux: A Robust State Management Library for JavaScript Applications

Redux 被广泛认为是专为 JavaScript 应用程序设计的强大状态管理库,通常与流行的框架 React 一起使用。通过提供可靠的状态容器,Redux 建立了坚实的基础,大大简化了应用程序状态的处理和故障排除任务。本指南深入研究了构成 Redux 的基本组件,提供了每个元素的详细解释,并说明了它们如何协同互操作以简化应用程序的整体功能。这种深入的探索旨在阐明 Redux 的内部工作原理,使开发人员能够掌握这个状态管理工具的复杂性,并在他们的项目中有效地利用其功能。

目录

  1. Redux 简介
  2. 在 React 应用程序中设置 Redux
  3. 操作和操作类型
  4. 减速器和切片
  5. 配置商店
  6. 连接 React 组件
  7. 结论与参考文献

1.Redux简介

Redux 遵循单向数据流模型,并基于三个核心原则:

  • 单一事实来源:整个应用程序的状态存储在单个存储中的对象树中。这种集中化使得调试和跟踪应用程序中的更改变得更加容易。
  • 状态是只读的:改变状态的唯一方法是发出一个动作,一个描述发生了什么的对象。这确保了状态突变是可预测和可追踪的。
  • 使用纯函数进行更改:要指定状态树如何通过操作进行转换,您可以编写纯减速器。纯函数是可预测和可测试的,这简化了调试和单元测试。

2. 在 React 应用程序中设置 Redux

首先,安装Redux和React-Redux:

npm install redux react-redux @reduxjs/toolkit

此命令安装核心 Redux 库、Redux 的 React 绑定和 Redux Toolkit,这简化了许多常见任务,例如设置存储和创建切片。

3. 动作和动作类型

操作是将数据从应用程序发送到 Redux 存储的信息负载。动作类型是表示动作的常量。

动作类型.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

定义操作和操作类型显然有助于保持一致性并减少应用程序中的错误。

4. 减速器和切片

Reducer 指定应用程序的状态如何更改以响应发送到存储的操作。切片是应用程序单个功能的 Redux 减速器逻辑和操作的集合,使用 Redux Toolkit 的 createSlice 方法创建。

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

合并多个切片:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. 配置商店

store是将actions和reducers结合在一起的对象。它保存应用程序状态,允许通过 getState() 访问它,通过dispatch(action) 更新它,并通过 subscribe(listener) 注册监听器。

商店.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. 连接 React 组件

要将React组件连接到Redux存储,请使用react-redux中的Provider组件将存储传递给您的组件,并使用useSelector和useDispatch钩子来访问和操作状态。

应用程序.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    
      
logo

Practice Redux with MusCo

by Mustafa Coskuncelebi
); } export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      

Counter

{number}

{ let newValue = e.target.value.trim(); if (newValue === "") { newValue = ""; reset(); } if (/^\d*$/.test(newValue)) { setValue(newValue); } }} value={value} placeholder="Enter Value" />

Counter cannot be less than 0

); } export default Counter;

7 结论和参考文献

Redux 是一个强大的库,用于管理应用程序中的状态。通过了解操作、减速器、存储以及如何将所有内容连接到 React 组件,您可以创建可预测和可维护的应用程序。

关键点:

  • 操作:定义应用程序中应该发生的事情。
  • Reducers:指定状态如何响应操作而变化。
  • Store:保存状态并处理操作。
  • Provider:将 store 传递给你的 React 组件。

更多信息请查看Redux官方文档:

  • Redux 文档
  • Redux 工具包文档
  • React-Redux 文档

通过遵循本指南,您应该对 Redux 有深入的了解,并能够在自己的应用程序中实现它。

版本声明 本文转载于:https://dev.to/abdullah-dev0/guide-to-redux-a-robust-state-management-library-for-javascript-applications-2emj?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 除了“if”语句之外:还有什么地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有什么地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句:if、whi...
    编程 发布于2024-12-19
  • 尽管代码有效,为什么 POST 请求无法捕获 PHP 中的输入?
    尽管代码有效,为什么 POST 请求无法捕获 PHP 中的输入?
    解决 PHP 中的 POST 请求故障在提供的代码片段中:action=''而不是:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"检查 $_POST数组:表单提交后使用 var_dump 检查 $_POST 数...
    编程 发布于2024-12-19
  • 插入数据时如何修复“常规错误:2006 MySQL 服务器已消失”?
    插入数据时如何修复“常规错误:2006 MySQL 服务器已消失”?
    插入记录时如何解决“一般错误:2006 MySQL 服务器已消失”介绍:将数据插入 MySQL 数据库有时会导致错误“一般错误:2006 MySQL 服务器已消失”。当与服务器的连接丢失时会出现此错误,通常是由于 MySQL 配置中的两个变量之一所致。解决方案:解决此错误的关键是调整wait_tim...
    编程 发布于2024-12-19
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-12-19
  • 如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    在 PHP 中组合关联数组在 PHP 中,将两个关联数组组合成一个数组是一项常见任务。考虑以下请求:问题描述:提供的代码定义了两个关联数组,$array1 和 $array2。目标是创建一个新数组 $array3,它合并两个数组中的所有键值对。 此外,提供的数组具有唯一的 ID,而名称可能重合。要求...
    编程 发布于2024-12-19
  • 如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    MySQL配置不正确:相对路径的问题在Django中运行python manage.py runserver时,可能会遇到以下错误:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...
    编程 发布于2024-12-19
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-12-19
  • 如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现,该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户: FROM USERS ...
    编程 发布于2024-12-19
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-12-19
  • 为什么我的 Spring Boot 应用程序不自动创建数据库架构?
    为什么我的 Spring Boot 应用程序不自动创建数据库架构?
    在 Spring Boot 中自动创建数据库架构启动 Spring Boot 应用程序时,可能会遇到自动创建数据库架构的问题。以下故障排除步骤旨在解决此问题:1.实体类包:确保实体类位于使用@EnableAutoConfiguration注解的类的同一个包或子包中。否则,Spring 将不会检测实体...
    编程 发布于2024-12-18
  • CSS3 过渡是否提供事件来检测起点和终点?
    CSS3 过渡是否提供事件来检测起点和终点?
    了解 CSS3 过渡事件CSS3 过渡允许在 Web 元素上实现流畅的动画和视觉效果。为了增强用户体验并使操作与这些转换同步,监控其进度非常重要。本文解决了 CSS3 是否提供事件来检查过渡何时开始或结束的问题。W3C CSS 过渡草案W3C CSS 过渡草案规定CSS 转换会触发相应的 DOM 事...
    编程 发布于2024-12-18
  • Java 中可以手动释放内存吗?
    Java 中可以手动释放内存吗?
    Java 中的手动内存释放与垃圾回收与 C 不同,Java 采用托管内存框架来处理内存分配和释放由垃圾收集器 (GC) 自动执行。这种自动化方法可以提高内存利用率并防止困扰 C 程序的内存泄漏。Java 中可以手动释放内存吗?由于 Java 的内存管理是由GC,它没有提供像 C 中的 free() ...
    编程 发布于2024-12-18
  • Java 1.6 中如何可靠地确定文件是否为符号链接?
    Java 1.6 中如何可靠地确定文件是否为符号链接?
    在 Java 1.6 中验证符号链接确定符号链接的存在对于各种文件处理操作至关重要。在 Java 中,识别符号链接时需要考虑一些潜在问题,特别是在目录遍历的上下文中。检查符号链接的一种常见方法是比较文件的绝对路径和规范路径。规范路径表示文件的标准化路径,而绝对路径可能包括符号链接。传统上,概念是如果...
    编程 发布于2024-12-17
  • 如何使背景颜色透明,同时保持文本不透明?
    如何使背景颜色透明,同时保持文本不透明?
    背景颜色的不透明度而不影响文本在 Web 开发领域,实现透明度通常对于增强视觉吸引力和网站元素的功能。一项常见的要求是对 div 背景应用透明度,同时保留所包含文本的不透明度。这可能会带来挑战,特别是在确保跨浏览器兼容性方面。rgba 解决方案最有效且得到广泛支持的解决方案是利用“RGBA”(红、绿...
    编程 发布于2024-12-17
  • PHP 字符串比较:`==`、`===` 或 `strcmp()` – 您应该使用哪个运算符?
    PHP 字符串比较:`==`、`===` 或 `strcmp()` – 您应该使用哪个运算符?
    PHP 中的字符串比较:'=='、'===' 或 'strcmp()'?PHP 中的字符串比较PHP 可以使用不同的运算符来完成,例如“==”、“===”或“strcmp()”函数。此比较涉及检查两个字符串是否相等。'==' 与 ...
    编程 发布于2024-12-17

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3