【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,一经查实,立即删除!

相关文章

windows C#-查询表达式基础(二)

查询变量 在 LINQ 中,查询变量是存储查询而不是查询结果的任何变量。 更具体地说,查询变量始终是可枚举类型,在 foreach 语句或对其 IEnumerator.MoveNext() 方法的直接调用中循环访问时会生成元素序列。 本文中的示例使用以下数据源和示例…

day08|计算机网络重难点之 DNS查询过程、CDN是什么,有什么作用?、Cookie和Session是什么?有什么区别?

day08|计算机网络重难点之 DNS查询过程、CDN是什么,有什么作用?、Cookie和Session是什么?有什么区别? 21.DNS查询过程22.CDN是什么,有什么作用?23.Cookie和Session是什么?有什么区别&#xff1f…

自己动手写Qt Creator插件

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

C++中的动态断言和静态断言

C中包含动态断言(assert)和静态断言(static_assert),下面分别分析各自的用法。 1.动态断言(assert) assert 是一个宏,在预处理阶段不生效,在运行阶段才起作用&#xff0…

【JAVA】Java基础—面向对象编程:继承—方法重写

一、背景介绍 在Java编程中,方法重写是面向对象编程(OOP)的一项重要特性。它允许子类提供对父类方法的具体实现,以便实现多态性。方法重写的主要用途包括: 实现多态性:允许在运行时根据对象的实际类型调用…

ORA-00257: archiver error

ORA-00257: archiver error 归档满问题: 报错: SQL> conn admin/admin ERROR: ORA-00257: archiver error. Connect internal only, until freed. Warning: You are no longer connected to ORACLE. 检查空间: SQL> select name, tot…

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

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

云服务器安装mysql8.0(阿里云或者腾讯云都可以)

先说明一下,我使用的是腾讯云,之前用阿里云,然后试用期到期了,所以这次换腾讯云使用,没想到,我在腾讯云里面需要按照阿里云的教程做,还成功了。 这里是阿里云的教程,真的很详细&…

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…

配置jellyfin docker 硬件加速

mount //192.168.3.152 -o iocharsetutf8,username15814812866,password611611,uidadministrator docker run -it --privilegedtrue --namej4 -v /mnt/nas /media1:rwdocker run -d –namej30 –nethost -v /home/ckw/文档/jellyfin/config:/config -v /home/ckw/文档/jel…

Asp.NET Core Mvc中一个视图怎么设置多个强数据类型

在ASP.NET Core MVC中,一个视图通常与一个强类型模型(Model)相关联。然而,在某些情况下,你可能需要在单个视图中使用多个不同的模型类型。为了实现这一点,你有几种选择: 使用视图模型&#xff0…

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、总结 上一篇文章上文中讲…