React之Redux详解

news2024/11/15 19:42:33

一、Redux

1、是什么

React是用于构建用户界面的,帮助我们解决渲染DOM的过程

而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享

如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程

这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管理集中处理,而不用去关心状态是如何分发到每一个组件内部的

redux就是一个实现上述集中管理的容器,遵循三大基本原则:

  • 单一数据源
  • state 是只读的
  • 使用纯函数来执行修改

注意的是,redux并不是只应用在react中,还与其他界面库一起使用,如Vue

2、工作原理

redux要求我们把数据都放在 store公共存储空间

一个组件改变了 store 里的数据内容,其他组件就能感知到 store的变化,再来取数据,从而间接的实现了这些数据传递的功能

工作流程图如下所示:

根据流程图,可以想象,React Components 是借书的用户, Action Creactor 是借书时说的话(借什么书), Store 是图书馆管理员,Reducer 是记录本(借什么书,还什么书,在哪儿,需要查一下), state 是书籍信息

整个流程就是借书的用户需要先存在,然后需要借书,需要一句话来描述借什么书,图书馆管理员听到后需要查一下记录本,了解图书的位置,最后图书馆管理员会把这本书给到这个借书人

转换为代码是,React Components 需要获取一些数据, 然后它就告知 Store 需要获取数据,这就是就是 Action Creactor , Store 接收到之后去 Reducer 查一下, Reducer 会告诉 Store 应该给这个组件什么数据

3、如何使用

创建一个store的公共数据区域

import { createStore } from 'redux' // 引入一个第三方的方法
const store = createStore() // 创建数据的公共存储区域(管理员)

还需要创建一个记录本去辅助管理数据,也就是reduecer,本质就是一个函数,接收两个参数stateaction,返回state

// 设置默认值
const initialState = {
  counter: 0
}

const reducer = (state = initialState, action) => {
}

然后就可以将记录本传递给store,两者建立连接。如下:

const store = createStore(reducer)

如果想要获取store里面的数据,则通过store.getState()来获取当前state

console.log(store.getState());

下面再看看如何更改store里面数据,是通过dispatch来派发action,通常action中都会有type属性,也可以携带其他的数据

store.dispatch({
  type: "INCREMENT"
})

store.dispath({
  type: "DECREMENT"
})

store.dispatch({
  type: "ADD_NUMBER",
  number: 5
})

下面再来看看修改reducer中的处理逻辑:

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {...state, counter: state.counter + 1};
    case "DECREMENT":
      return {...state, counter: state.counter - 1};
    case "ADD_NUMBER":
      return {...state, counter: state.counter + action.number}
    default: 
      return state;
  }
}

注意,reducer是一个纯函数,不需要直接修改state

这样派发action之后,既可以通过store.subscribe监听store的变化,如下:

store.subscribe(() => {
  console.log(store.getState());
})

React项目中,会搭配react-redux进行使用

完整代码如下:

const redux = require('redux');

const initialState = {
  counter: 0
}

// 创建reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {...state, counter: state.counter + 1};
    case "DECREMENT":
      return {...state, counter: state.counter - 1};
    case "ADD_NUMBER":
      return {...state, counter: state.counter + action.number}
    default: 
      return state;
  }
}

// 根据reducer创建store
const store = redux.createStore(reducer);

store.subscribe(() => {
  console.log(store.getState());
})

// 修改store中的state
store.dispatch({
  type: "INCREMENT"
})
// console.log(store.getState());

store.dispatch({
  type: "DECREMENT"
})
// console.log(store.getState());

store.dispatch({
  type: "ADD_NUMBER",
  number: 5
})
// console.log(store.getState());

小结

  • createStore可以帮助创建 store
  • store.dispatch 帮助派发 action , action 会传递给 store
  • store.getState 这个方法可以帮助获取 store 里边所有的数据内容
  • store.subscrible 方法订阅 store 的改变,只要 store 发生改变, store.subscrible 这个函数接收的这个回调函数就会被执行

二、Redux中间件

1、是什么

中间件(Middleware)是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的

在上篇文章中,了解到了Redux整个工作流程,当action发出之后,reducer立即算出state,整个过程是一个同步的操作

那么如果需要支持异步操作,或者支持错误处理、日志监控,这个过程就可以用上中间件

Redux中,中间件就是放在就是在dispatch过程,在分发action进行拦截处理,如下图:

其本质上一个函数,对store.dispatch方法进行了改造,在发出 Action和执行 Reducer这两步之间,添加了其他功能

2、常用的中间件

有很多优秀的redux中间件,如:

  • redux-thunk:用于异步操作
  • redux-logger:用于日志记录

上述的中间件都需要通过applyMiddlewares进行注册,作用是将所有的中间件组成一个数组,依次执行

然后作为第二个参数传入到createStore

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
);
redux-thunk

redux-thunk是官网推荐的异步处理中间件

默认情况下的dispatch(action)action需要是一个JavaScript的对象

redux-thunk中间件会判断你当前传进来的数据类型,如果是一个函数,将会给函数传入参数值(dispatch,getState)

  • dispatch函数用于我们之后再次派发action
  • getState函数考虑到我们之后的一些操作需要依赖原来的状态,用于让我们可以获取之前的一些状态

所以dispatch可以写成下述函数的形式:

const getHomeMultidataAction = () => {
  return (dispatch) => {
    axios.get("http://xxx.xx.xx.xx/test").then(res => {
      const data = res.data.data;
      dispatch(changeBannersAction(data.banner.list));
      dispatch(changeRecommendsAction(data.recommend.list));
    })
  }
}
redux-logger

如果想要实现一个日志功能,则可以使用现成的redux-logger


import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

这样我们就能简单通过中间件函数实现日志记录的信息

3、实现原理

首先看看applyMiddlewares的源码

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

所有中间件被放进了一个数组chain,然后嵌套执行,最后执行store.dispatch。可以看到,中间件内部(middlewareAPI)可以拿到getStatedispatch这两个方法

在上面的学习中,我们了解到了redux-thunk的基本使用

内部会将dispatch进行一个判断,然后执行对应操作,原理如下:

function patchThunk(store) {
    let next = store.dispatch;

    function dispatchAndThunk(action) {
        if (typeof action === "function") {
            action(store.dispatch, store.getState);
        } else {
            next(action);
        }
    }

    store.dispatch = dispatchAndThunk;
}

实现一个日志输出的原理也非常简单,如下:

let next = store.dispatch;

function dispatchAndLog(action) {
  console.log("dispatching:", addAction(10));
  next(addAction(5));
  console.log("新的state:", store.getState());
}

store.dispatch = dispatchAndLog;

三、项目中使用Redux 

1、背景

在上面文章了解中,我们了解到redux是用于数据状态管理,而react是一个视图层面的库

如果将两者连接在一起,可以使用官方推荐react-redux库,其具有高效且灵活的特性

react-redux将组件分成:

  • 容器组件:存在逻辑处理
  • UI 组件:只负责现显示和交互,内部不处理逻辑,状态由外部控制

通过redux将整个应用状态存储到store中,组件可以派发dispatch行为actionstore

其他组件通过订阅store中的状态state来更新自身的视图

2、如何做

使用react-redux分成了两大核心:

  • Provider
  • connection
Provider

redux中存在一个store用于存储state,如果将这个store存放在顶层元素中,其他组件都被包裹在顶层元素之上

那么所有的组件都能够受到redux的控制,都能够获取到redux中的数据

使用方式如下:

<Provider store = {store}>
    <App />
<Provider>
connection

connect方法将store上的getState和 dispatch包装成组件的props

导入conect如下:

import { connect } from "react-redux";

用法如下:

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

可以传递两个参数:

  • mapStateToProps

  • mapDispatchToProps

mapStateToProps

redux中的数据映射到react中的props中去

如下:

const mapStateToProps = (state) => {
    return {
        // prop : state.xxx  | 意思是将state中的某个数据映射到props中
        foo: state.bar
    }
}

组件内部就能够通过props获取到store中的数据

class Foo extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
         // 这样子渲染的其实就是state.bar的数据了
            <div>this.props.foo</div>
        )
    }
}
Foo = connect()(Foo)
export default Foo
mapDispatchToProps

redux中的dispatch映射到组件内部的props

const mapDispatchToProps = (dispatch) => { // 默认传递参数就是dispatch
  return {
    onClick: () => {
      dispatch({
        type: 'increatment'
      });
    }
  };
}

class Foo extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
         
             <button onClick = {this.props.onClick}>点击increase</button>
        )
    }
}
Foo = connect()(Foo);
export default Foo;
小结

整体流程图大致如下所示:

3、项目结构

可以根据项目具体情况进行选择,以下列出两种常见的组织结构

按角色组织(MVC)

角色如下:

  • reducers
  • actions
  • components
  • containers

参考如下:

reducers/
  todoReducer.js
  filterReducer.js
actions/
  todoAction.js
  filterActions.js
components/
  todoList.js
  todoItem.js
  filter.js
containers/
  todoListContainer.js
  todoItemContainer.js
  filterContainer.js
按功能组织

使用redux使用功能组织项目,也就是把完成同一应用功能的代码放在一个目录下,一个应用功能包含多个角色的代码

Redux中,不同的角色就是reduceractions和视图,而应用功能对应的就是用户界面的交互模块

参考如下:

todoList/
  actions.js
  actionTypes.js
  index.js
  reducer.js
  views/
    components.js
    containers.js
filter/
  actions.js
  actionTypes.js
  index.js
  reducer.js
  views/
    components.js
    container.js

每个功能模块对应一个目录,每个目录下包含同样的角色文件:

  • actionTypes.js 定义action类型
  • actions.js 定义action构造函数
  • reducer.js 定义这个功能模块如果响应actions.js定义的动作
  • views 包含功能模块中所有的React组件,包括展示组件和容器组件
  • index.js 把所有的角色导入,统一导出

其中index模块用于导出对外的接口

导入方法如下:

import { actions, reducer, view as TodoList } from './xxxx'

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

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

相关文章

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.8 绘图事件

本节对应的视频讲解&#xff1a;B_站_链_接 【QT开发笔记-基础篇】 第4章 事件 4.8 绘图事件(1) 本章要实现的整体效果如下&#xff1a; QEvent::Paint ​ 当窗口/控件需要重绘时&#xff0c;触发该事件&#xff0c;它对应的子类是 QPaintEvent 本节通过一个向 QLabel 上绘制…

“揭秘!如何通过京东商品详情接口轻松获取海量精准商品信息!“

京东商品详情接口可以通过HTTP GET请求获取商品详情信息。 请求参数包括num_iid&#xff0c;表示JD商品ID。 请求示例&#xff1a; GET /jd/item_get/?num_iid10335871600 HTTP/1.1 Host: api-vx.Taobaoapi2014.cn Connection: close Accept-Encoding: gzip 点击获取…

决策树深度探索: 从基础构建到机器学习应用

机器学习 第六课 决策树 概述决策树的基本概念决策树的应用决策树的基本构建节点 (Node)分支 (Branch)决策树的构造过程 信息增益熵 (Entropy)条件熵 (Conditional Entropy)信息增益 (Information Gain) 信息熵计算计算数据集的熵计算在给定属性条件下的熵计算信增益 (Informat…

深入剖析Java类加载过程:探寻类加载器的奥秘

摘要: 一个java文件从被加载到被卸载这个生命过程&#xff0c;总共要经历4个阶段&#xff1a; 加载->链接&#xff08;验证准备解析&#xff09;->初始化&#xff08;使用前的准备&#xff09;->使用->卸载 其中类加载过程包括加载、验证、准备、解析和初始化五个阶…

如何使用Abaqus import进行预应力跌落仿真

跌落测试除了单次跌落外&#xff0c;根据不同的标准需求&#xff0c;还有多次跌落或者预应力跌落&#xff0c;上次我们进行了单次跌落在Abaqus中的实现过程&#xff0c;今天我们使用Abaqus Import功能&#xff0c;进行卡扣的预应力跌落。 首先进行卡扣的装配仿真&#xff0c;在…

Note——time

time import import datetime import timeDefinition of time from 1970-01-01 00:00:00 UTC Coordinated Universal Time as the float format of ‘seconds’ For example use structured time lists [ year,month,day,hours,minutes,seconds…] 表示从1970-01-01 00:00:…

当苹果铅笔不能工作时,不一定都是苹果铅笔的问题!苹果铅笔不工作时如何修复

你的苹果铅笔没有按预期工作,可能有几个原因;大多数都有相当简单的修复方法。苹果铅笔的故障排除技巧在两代配件中基本相同。 本文中的信息适用于兼容iPad上的苹果铅笔(第二代)和苹果铅笔(第一代)。 检查蓄电池 苹果铅笔的电池必须充电才能工作。要检查iPad上的电池状…

云表:为什么要使用低代码开发?低代码选择指南

随着信息技术的不断发展&#xff0c;我们进入了一个数字化的时代。在这个时代&#xff0c;IT技术已经成为推动全球信息化浪潮的重要力量。然而&#xff0c;随着应用程序开发技术的不断发展&#xff0c;开发效率并没有像摩尔定律一样快速提升&#xff0c;反而成为了瓶颈。因此&a…

Django实现音乐网站 (21)

使用Python Django框架做一个音乐网站&#xff0c; 本篇音乐播放器功能完善及原有功能修改。 目录 播放列表修改 视图修改 删除、清空播放器 设置路由 视图处理 修改加载播放器脚本 模板修改 脚本设置 清空功能实现 删除列表音乐 播放列表无数据处理 视图修改 播放…

uniapp自定义右击菜单

效果图&#xff1a; 代码&#xff1a; 1、需要右击的view: <view class"answer-box" contextmenu.stop.prevent.native"showRightMenu($event, item, content)"> </view>2、右击弹出层&#xff1a; <view v-if"visible" :styl…

001.第一个C语言项目

Visual studio2022的使用 创建第一个C语言项目和源文件 https://blog.csdn.net/qq_45037165/article/details/124520286 第一个C语言项目 #include<stdio.h> int main() {printf("Hello World");return 0; }运行结果&#xff1a; 第一行为库函数&#xff0…

docker容器健康状态健康脚本

代码&#xff1a; #!/bin/bash# 定义要监控的容器名称 container_name"mysql-container"# 使用Docker命令来检查容器的运行状态 container_status$(docker inspect --format"{{.State.Status}}" "$container_name")# 检查容器状态并进行相应操作…

PAM从入门到精通(十五)

接前一篇文章&#xff1a;PAM从入门到精通&#xff08;十四&#xff09; 本文参考&#xff1a; 《The Linux-PAM Application Developers Guide》 先再来重温一下PAM系统架构&#xff1a; 更加形象的形式&#xff1a; 六、整体流程示例 1. 官方文档中的例程及解析 从PAM从入…

数字人引领政务革新,AI智慧政务一体机的未来服务之路

数字人、数字员工&#xff0c;已是当下不可忽视的新型劳动者&#xff0c;它们在众多领域频频出圈&#xff0c;持续打破人们的固有认知。在近期公布的2023数字人实践案例TOP10里&#xff0c;CCTV央视网数字代言人阿央”带领新一代青年紧跟国家大事、关注国家发展&#xff1b;首位…

Java操作Python及数据交互最佳实践

Java操作Python最佳实践 1、Java与Python的互操作性2、Java调用Python脚本及数据交互2.1、准备工作2.2、执行一段Python代码2.3、执行Python文件脚本2.4、执行Python文件中的指定方法2.5、执行含有第三方库的Python文件3、附录(完整代码)1、Java与Python的互操作性 在当今的软…

Mac电脑无法识别移动硬盘怎么办?

很多人都喜欢在Mac电脑上办公、学习&#xff0c;但有时我们将移动硬盘连接Mac电脑时&#xff0c;却会发现电脑无法识别移动硬盘。那么&#xff0c;Mac电脑无法识别移动硬盘怎么办呢&#xff1f; Mac无法识别移动硬盘的原因 导致Mac不识别移动硬盘的原因有很多&#xff0c;你可…

交换机知识汇总大全,值得收藏!

下午好&#xff0c;我的网工朋友。 说到网工相关的网络设备&#xff0c;你的第一反应是啥&#xff1f;答案基本上都是交换机&#xff0c;是吧。 交换机作为网工最常用的设备之一&#xff0c;你懂多少&#xff1f; 今天想带你温顾一番交换机的基础知识&#xff0c;顺便说说&a…

iOS如何实现语音转文字功能?

1.项目中添加权限 Privacy - Speech Recognition Usage Description : 需要语音识别权限才能实现语音转文字功能 2.添加头文件 #import <AVFoundation/AVFoundation.h> #import<Speech/Speech.h> 3.实现语音转文字逻辑: 3.1 根据wav语音文件创建请求 SFSpeechU…

Macos文件列表创建工具:Nifty File Lists for mac

Nifty File Lists Mac是一款功能强大的文件列表工具&#xff0c;它可以帮助用户在Mac电脑上保存、整理和编辑文件列表。该软件支持将文件列表保存为MS Excel、数字和页面友好的CSV&#xff08;逗号分隔值&#xff09;、TSV&#xff08;制表符分隔值&#xff09;甚至HTML格式&am…