【React】状态管理之Redux


鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础
💫个人格言: "如无必要,勿增实体"


文章目录

  • 状态管理之Redux
    • 引言
    • 1. Redux 的核心概念
      • 1.1 单一数据源(Single Source of Truth)
      • 1.2 State 是只读的
      • 1.3 使用纯函数执行修改
    • 2. Redux 工作流程
      • 2.1 数据流向
      • 2.2 中间件机制
    • 3. Redux 内部实现原理
      • 3.1 createStore 的实现
      • 3.2 combineReducers 的实现
    • 4. Redux 性能优化
      • 4.1 reselect 的使用
      • 4.2 不可变性的保持
    • 5. 实际应用中的最佳实践
      • 5.1 Action 创建函数
      • 5.2 异步 Action 处理
    • 总结

状态管理之Redux

在这里插入图片描述

引言

Redux 作为一个优秀的状态管理工具,在 React 生态系统中占据着重要地位。本文将深入探讨 Redux 的核心工作原理,帮助开发者更好地理解和使用这个工具。

1. Redux 的核心概念

1.1 单一数据源(Single Source of Truth)

Redux 使用单一的 store 来存储应用的所有状态。这意味着:

  • 整个应用的状态被存储在一个对象树中
  • 这个对象树只存在于唯一的 store 中
  • 状态是只读的,唯一改变状态的方式是触发 action
const store = {todos: [],visibilityFilter: 'SHOW_ALL',user: {id: null,name: null}
}

1.2 State 是只读的

在 Redux 中,改变状态的唯一方式是触发(dispatch)一个 action。这确保了:

  • 视图和网络请求都不能直接修改状态
  • 所有的修改都被集中化处理
  • 修改都是按顺序一个接一个地执行
// Action 的结构
const action = {type: 'ADD_TODO',payload: {text: '学习 Redux',completed: false}
}

1.3 使用纯函数执行修改

Reducer 是一个纯函数,它接收先前的状态和一个 action,返回新的状态:

const todoReducer = (state = [], action) => {switch (action.type) {case 'ADD_TODO':return [...state, action.payload]case 'TOGGLE_TODO':return state.map(todo =>todo.id === action.payload.id? { ...todo, completed: !todo.completed }: todo)default:return state}
}

2. Redux 工作流程

在这里插入图片描述

2.1 数据流向

Redux 采用严格的单向数据流,主要包含以下步骤:

  1. 用户在界面触发事件
  2. 调用 dispatch(action)
  3. Redux store 调用 reducer 函数
  4. Root reducer 把多个子 reducer 输出合并成一个单一的状态树
  5. Redux store 保存了 reducer 返回的完整状态树

2.2 中间件机制

中间件提供了一个分类处理 action 的机制:

// 中间件示例
const logger = store => next => action => {console.log('dispatching', action)let result = next(action)console.log('next state', store.getState())return result
}

3. Redux 内部实现原理

3.1 createStore 的实现

createStore 是 Redux 最核心的 API:

function createStore(reducer, preloadedState, enhancer) {let currentReducer = reducerlet currentState = preloadedStatelet currentListeners = []function getState() {return currentState}function subscribe(listener) {currentListeners.push(listener)return function unsubscribe() {const index = currentListeners.indexOf(listener)currentListeners.splice(index, 1)}}function dispatch(action) {currentState = currentReducer(currentState, action)currentListeners.forEach(listener => listener())return action}return {getState,subscribe,dispatch}
}

3.2 combineReducers 的实现

combineReducers 用于合并多个 reducer:

function combineReducers(reducers) {return function combination(state = {}, action) {const nextState = {}let hasChanged = falsefor (let key in reducers) {const reducer = reducers[key]const previousStateForKey = state[key]const nextStateForKey = reducer(previousStateForKey, action)nextState[key] = nextStateForKeyhasChanged = hasChanged || nextStateForKey !== previousStateForKey}return hasChanged ? nextState : state}
}

4. Redux 性能优化

在这里插入图片描述

4.1 reselect 的使用

使用 reselect 可以避免不必要的重复计算:

import { createSelector } from 'reselect'const getTodos = state => state.todos
const getVisibilityFilter = state => state.visibilityFilterconst getVisibleTodos = createSelector([getTodos, getVisibilityFilter],(todos, filter) => {switch (filter) {case 'SHOW_ALL':return todoscase 'SHOW_COMPLETED':return todos.filter(t => t.completed)case 'SHOW_ACTIVE':return todos.filter(t => !t.completed)}}
)

4.2 不可变性的保持

确保状态更新的不可变性是 Redux 性能优化的关键:

// 不推荐
state.todos[0].completed = true// 推荐
return {...state,todos: state.todos.map((todo, index) =>index === 0 ? { ...todo, completed: true } : todo)
}

5. 实际应用中的最佳实践

5.1 Action 创建函数

使用 action 创建函数来生成 action:

const addTodo = text => ({type: 'ADD_TODO',payload: {id: nextTodoId++,text,completed: false}
})

5.2 异步 Action 处理

使用 redux-thunk 处理异步操作:

const fetchTodos = () => {return async dispatch => {dispatch({ type: 'FETCH_TODOS_REQUEST' })try {const response = await api.fetchTodos()dispatch({type: 'FETCH_TODOS_SUCCESS',payload: response.data})} catch (error) {dispatch({type: 'FETCH_TODOS_FAILURE',error: error.message})}}
}

总结

Redux 通过其简单而强大的设计原则,为 React 应用提供了可预测的状态管理能力。理解其工作原理对于构建大型应用至关重要。核心要点包括:

  • 单一数据源
  • 状态只读
  • 使用纯函数进行修改
  • 单向数据流
  • 中间件机制

通过合理运用这些原则,我们可以构建出更加可维护和可扩展的应用。同时,通过使用 reselect、保持不可变性等优化手段,还能确保应用具有良好的性能表现。

End

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自己动手写Qt Creator插件

文章目录 前言一、环境准备1.先看自己的Qt Creator IDE的版本2.下载源码 二、使用步骤1.参考原本的插件2.编写自定义插件1.cmakelist增加一个模块2.同理,qbs文件也增加一个3.插件源码 三、效果总结 前言 就目前而言,Qt Creator这个IDE,插件比…

React Native 全栈开发实战班 -React Native 基础

本课程旨在帮助学员系统掌握 React Native 全栈开发技能,从基础入门到实战项目开发。课程将分为多个模块,第一部分将聚焦于 React Native 的基础知识,包括开发环境搭建、React Native 简介与特点,以及项目结构解析。 第一部分&am…

Leetcode:118. 杨辉三角——Java数学法求解

题目——Leetcode:118. 杨辉三角 给定一个非负整数 numRows,生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中,每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRow…

Linux中.NET读取excel组件,不会出现The type initializer for ‘Gdip‘ threw an exception异常

组件,可通过nuget安装,直接搜名字: ExcelDataReader using ConsoleAppReadFileData.Model; using ExcelDataReader; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Task…

Robot | 用 RDK 做一个小型机器人(更新中)

目录 前言架构图开发过程摄像头模型转换准备校准数据使用 hb_mapper makertbin 工具转换模型 底版开发 结语 前言 最近想开发一个小型机器人,碰巧看到了 RDK x5 发布了,参数对于我来说非常合适,就买了一块回来玩。 外设也是非常丰富&#xf…

jenkins使用cli发行uni-app到h5

官网文档HBuilderX 文档 首先确定是否存在环境变量 正常情况cmd中执行cli 如果提示 cli 不是内部或外部命令,也不是可运行的程序或批处理文件。请先配置环境变量 Freestyle Project项目在Build Steps中增加Execute Windows batch command命令如下 d: cd D:\devsof…

基于Zynq FPGA对雷龙SD NAND的测试

一、SD NAND特征 1.1 SD卡简介 雷龙的SD NAND有很多型号,在测试中使用的是CSNP4GCR01-AMW与CSNP32GCR01-AOW。芯片是基于NAND FLASH和 SD控制器实现的SD卡。具有强大的坏块管理和纠错功能,并且在意外掉电的情况下同样能保证数据的安全。 其特点如下&…

【Java语言】String类

在C语言中字符串用字符可以表示,可在Java中有单独的类来表示字符串(就是String),现在我来介绍介绍String类。 字符串构造 一般字符串都是直接赋值构造的,像这样: 还可以这样构造: 图更能直观的…

【神经科学学习笔记】基于分层嵌套谱分割(Nested Spectral Partition)模型分析大脑网络整合与分离的局部指标(二)

前言 1.学习背景 前几天笔者学习使用NSP (Network Segregation and Partnership) 算法计算大脑整合分离的全局指标,现在要在之前学习的基础上再来玩玩局部指标。 局部指标的计算主要在两个层面上进行:第一个层面是针对每个独立ROI的指标计算&#xff0…

WPF-控件的属性值的类型转化

控件的属性值需要转成int、double进行运算的&#xff0c;可以使用一下方法 页面代码 <StackPanel Margin"4,0,0,0" Style"{StaticResource Form-StackPanel}"> <Label Content"替换后材料增加金额&#xff…

Python3.11.9下载和安装

一、Python3.11.9下载和安装 1、下载 下载地址&#xff1a;https://www.python.org/downloads/windows/ 选择版本下载&#xff0c;例如&#xff1a;Python 3.11.9 - April 2, 2024 2、安装 双击exe安装 3、配置环境变量 pathD:\Program Files\python3.11.9 pathD:\Progr…

大模型学习笔记------BLIP模型的再思考

大模型学习笔记------BLIP模型的再思考 1、BLIP推理---如何进行“图生文”2、BLIP推理---如何进行视觉问答&#xff08;Visual Question Answering, VQA&#xff09;3、BLIP推理---如何进行图文检索&#xff08;Image-text retrieval&#xff09;任务4、总结 上一篇文章上文中讲…

超全面!一文带你快速入门HTML,CSS和JavaScript!

作为一名后端程序员&#xff0c;在开发过程中避免不了和前端打交道&#xff0c;所以就要了解一些前端的基础知识&#xff0c;比如三剑客HTML,CSS,JavaScript&#xff0c;甚至有必要学习一下Vue、React等前端主流框架。 学习文档&#xff1a;https://www.w3school.com.cn/ 一…

PcVue + SQL Grid : 释放数据的无限潜力

探秘PcVue系列&#xff1a;E3 PcVue SQL Grid : 释放数据的无限潜力 探秘PcVue之SQL 什么是SQL Grid&#xff1f; SQL Grid用于通过简单的sql查询语句&#xff0c;实现数据的查询和显示。结构化查询语句&#xff08;SQL&#xff09;可以帮助SCADA软件用户提高连接性以及发送和…

使用 Umami 部署博客分析工具

Umami 简介 Umami 是一款开源且注重隐私的网站分析工具&#xff0c;可替代 Google Analytics。它提供网站流量和用户行为等见解&#xff0c;但不使用 Cookie 或收集个人数据&#xff0c;符合隐私法规。Umami 轻巧易用&#xff0c;可自行托管。 如果你有自己的博客&#xff0c;…

Flink_DataStreamAPI_执行环境

DataStreamAPI_执行环境 1创建执行环境1.1getExecutionEnvironment1.2createLocalEnvironment1.3createRemoteEnvironment 2执行模式&#xff08;Execution Mode&#xff09;3触发程序执行 Flink程序可以在各种上下文环境中运行&#xff1a;我们可以在本地JVM中执行程序&#x…

数据结构——排序(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…

MongoDB在现代Web开发中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 MongoDB在现代Web开发中的应用 MongoDB在现代Web开发中的应用 MongoDB在现代Web开发中的应用 引言 MongoDB 概述 定义与原理 发展…

CSS的综合应用例子(网页制作)

这是html的一些最基本内容的代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <t…

【设计模式】行为型模式(二):策略模式、命令模式

行为型模式&#xff08;二&#xff09;&#xff1a;策略模式、命令模式 3.策略模式&#xff08;Strategy&#xff09;3.1 示例3.1.1 定义策略接口3.1.2 实现具体策略3.1.3 定义上下文类3.1.4 客户端代码3.1.5 输出结果 3.2 总结3.2.1 优点3.2.2 缺点 4.命令模式&#xff08;Com…