什么是redux?如何在react 项目中使用redux?

redux 概念

redux是一种用于管理JavaScript应用程序的状态管理库。它可以与React、Augular、Vue等前端框架结合使用,但也可以纯在JavaScript应用程序中独立使用。redux遵循单项数据流的原则,通过一个全局的状态树来管理应用程序的状态,从而使状态的变化更加可预测和已于维护。
redux的核心概念包括:

  1. Store: redux 的状态储存仓库,包括整个应用程序的状态树。应用程序中的所有状态都保存在整个单一的状态树中。
  2. Action: 代表状态变化的对象。它是一个包含type字段的JavaScript对象,用于描述发生的事件类型,并可以携带一些额外的数据。
  3. Reducer:纯函数,用于处理状态变化。接受旧的状态和一个action作为参数,返回一个新的状态。
  4. Dispatch:将action发送到reducer的过程,通过调用store.dispatch(action)来触发状态的变化。
  5. Subscribe:用于注册监听器,当状态发送变化时,可以通过store.subcribe(listener)来执行回调函数。
    下面时一个简单的redux示例代码:
// 引入Redux
const { createStore } = require('redux');// 定义初始状态和Reducer
const initialState = { count: 0 };function counterReducer(state = initialState, action) {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };default:return state;}
}// 创建Redux store
const store = createStore(counterReducer);// 订阅状态变化
store.subscribe(() => {const currentState = store.getState();console.log('Current state:', currentState);
});// 触发状态变化
store.dispatch({ type: 'INCREMENT' }); // 输出:Current state: { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // 输出:Current state: { count: 2 }
store.dispatch({ type: 'DECREMENT' }); // 输出:Current state: { count: 1 }

如何在项目中封装一个全局状态。

在使用create-react-app创建的React项目中,可以使用reduxreact-redux来封装和管理全局状态。以下是在create-react-app项目中封装Redux并在需要的页面引入的步骤:

  1. 安装reduxreact-redux库:
npm install redux react-redux
  1. 创建Redux store:
    在项目的src目录下创建一个名为store的文件夹,并在该文件夹下创建一个index.js文件,用于创建Redux store。
// src/store/index.js
import { createStore } from 'redux';
import rootReducer from './reducers'; // 导入根Reducerconst store = createStore(rootReducer);export default store;

在上述代码中,使用createStore函数创建了Redux store,并传入了根ReducerrootReducer

  1. 创建Reducers:
    src/store文件夹下创建一个名为reducers.js的文件,用于定义和组合所有的Reducers。
// src/store/reducers.js
import { combineReducers } from 'redux';
// 导入其他Reducers,比如:
// import counterReducer from './counterReducer';const rootReducer = combineReducers({// 在这里将所有的Reducers组合起来// counter: counterReducer,
});export default rootReducer;

在这里,可以导入并组合所有的Reducers,如果你有多个Reducer,可以在这里添加并在combineReducers函数中进行组合。

  1. 创建Actions:
    src/store文件夹下创建一个名为actions.js的文件,用于定义Redux的Actions。
// src/store/actions.js
// 定义Action Types
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';// 定义Action Creators
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

在上述代码中,定义了两个Action Types和对应的Action Creators。

  1. 创建Reducer:
    src/store文件夹下创建一个名为counterReducer.js的文件,用于定义一个Reducer示例。
// src/store/counterReducer.js
import { INCREMENT, DECREMENT } from './actions';const initialState = { count: 0 };const counterReducer = (state = initialState, action) => {switch (action.type) {case INCREMENT:return { ...state, count: state.count + 1 };case DECREMENT:return { ...state, count: state.count - 1 };default:return state;}
};export default counterReducer;

在上述代码中,定义了一个简单的counterReducer,根据不同的Action Type来处理状态的变化。

  1. 在需要的页面引入Redux:
    在你需要使用Redux的组件或页面中,可以使用react-redux提供的Provider组件将Redux store注入到应用中,使其在组件层次结构中的任何地方都可以访问全局状态。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
);

在上述代码中,使用Provider组件将store作为prop传递给应用的根组件App

  1. 在组件中使用Redux的状态:
    现在你可以在需要的组件中使用Redux的状态了。通过react-redux提供的useSelectoruseDispatch等hooks,或者使用connect函数,你可以在组件中访问和修改全局状态。
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store/actions';const Counter = () => {const count = useSelector((state) => state.counter.count);const dispatch = useDispatch();return (<div><h1>Counter: {count}</h1><button onClick={() => dispatch(increment())}>Increment</button><button onClick={() => dispatch(decrement())}>Decrement</button></div>);
};export default Counter;

在上述代码中,使用useSelector获取counter的状态,以及使用useDispatch获取dispatch函数,从而在组件中对状态进行修改。

connect函数

react-redux中,connect函数是一个高阶函数(Higher-Order Function),它允许你将Redux的状态和dispatch函数作为props传递给React组件。使用connect函数可以将组件与Redux store连接起来,从而让组件可以访问和修改全局状态。

在React中,有两种方式可以访问和使用Redux的状态:

  1. 使用Hooks(推荐):react-redux提供了一些Hooks,如useSelectoruseDispatch。使用Hooks的方式更加简洁,直接,而且是React的新特性。可以在函数式组件中使用这些Hooks来获取Redux的状态和dispatch函数,例如:
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store/actions';const Counter = () => {const count = useSelector((state) => state.counter.count);const dispatch = useDispatch();return (<div><h1>Counter: {count}</h1><button onClick={() => dispatch(increment())}>Increment</button><button onClick={() => dispatch(decrement())}>Decrement</button></div>);
};export default Counter;
  1. 使用connect函数(旧版方式):在较早版本的react-redux中,Hooks可能不可用或者不适用于类组件,此时可以使用connect函数来实现连接。connect函数可以将Redux的状态和dispatch函数映射到组件的props上,这样组件就能够通过props来访问和修改Redux的状态。
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './store/actions';class Counter extends React.Component {render() {const { count, increment, decrement } = this.props;return (<div><h1>Counter: {count}</h1><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>);}
}const mapStateToProps = (state) => {return {count: state.counter.count};
};const mapDispatchToProps = (dispatch) => {return {increment: () => dispatch(increment()),decrement: () => dispatch(decrement())};
};export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在上述代码中,使用connect函数将Redux的状态映射到组件的props中,并定义了mapStateToPropsmapDispatchToProps函数来进行映射。

总结:
使用connect函数是较早版本react-redux的一种实现方式,而使用Hooks的方式则是React的新特性,更加简洁和方便。如果你使用的react-redux版本较新,并且项目支持React Hooks,那么推荐使用Hooks的方式来访问和修改Redux的状态。如果项目需要兼容旧版本的react-redux或需要在类组件中使用,那么可以考虑使用connect函数的方式。

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

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

相关文章

快速排序——“数据结构与算法”

各位CSDN的uu们好呀&#xff0c;今天又是小雅兰的数据结构与算法专栏啦&#xff0c;下面&#xff0c;就让我们进入快速排序的世界吧&#xff01;&#xff01;&#xff01; 快速排序 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法&#xff0c;其基本思想为&…

【Docker】Docker容器与虚拟机的对比、三要素、架构和镜像加速器的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

什么?你还没有用过JPA Buddy,那么你工作肯定没5年

1. 概述 JPA Buddy是一个广泛使用的IntelliJ IDEA插件&#xff0c;面向使用JPA数据模型和相关技术&#xff08;如Spring DataJPA&#xff0c;DB版本控制工具&#xff08;Flyway&#xff0c;Liquibase&#xff09;&#xff0c;MapStruct等&#xff09;的新手和有经验的开发人员…

局域网ssh登录windows自带Linux系统(WSL)踩坑记录

局域网ssh登录windows自带Linux系统&#xff08;WSL&#xff09;踩坑记录 系统和工具安装查看IPLinux用户和端口设置Windows ssh 登录Mac ssh 登录 系统和工具安装 先按照网上的教程安装好Linux系统&#xff08;一般都是安装Ubuntu&#xff09;&#xff0c;安装好ssh等工具&am…

《Java-SE-第二十七章》之常见的锁策略

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…

RD算法(四)登堂入室 —— 成像完成

SAR成像专栏目录_lightninghenry的博客-CSDN博客https://lightning.blog.csdn.net/article/details/122393577?spm=1001.2014.3001.5502先放RD算法最终的成像结果: 经简单的地距投影后为(地距投影的内容在后面的几何校正章节中讲解): 温哥华这地形还真像是一张怪兽的巨嘴呀…

方差分析||判断数据是否符合正态分布

方差分析练习题 练习学习笔记&#xff1a; &#xff08;1&#xff09; 标准差和标准偏差、均方差是一个东西。标准误差和标准误是一个东西。这两个东西有区别。 &#xff08;2&#xff09;单因素方差分析&#xff08;MATLAB求解&#xff09; &#xff08;3&#xff09;使用an…

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

同比环比使用方法

一、解释&#xff1a; 1.同比&#xff1a;本期与去年同期相比 &#xff0c;如2023年8月 比 2022年8月 2.环比&#xff1a;本期与上期相比 &#xff0c;如2023年8月 比 2023年7月 二、应用&#xff1a; 1.场景&#xff1a;统计日报、周报、月报、年报下进店客流的同比和环…

TypeScript使用技巧

文章目录 使用技巧TypeScript内置的工具类型keyofextends 限定泛型interface 与 type 区别 TypeScript作为JavaScript的超集,通过提供静态类型系统和对ES6新特性的支持,使JavaScript开发变得更加高效和可维护。掌握TypeScript的使用技巧,可以帮助我们更好地开发和组织JavaScrip…

银河麒麟V10 飞腾 Qt环境搭建

采用在线安装方式&#xff1a; 1、在线安装qt组件 sudo apt-get install qt5-* 2、在线安装qt creator sudo apt-get install qtcreator 以上简单两步安装完成后&#xff0c;新建项目已经可以编译过&#xff0c;但ClangCodeModel会报错如下图 the code model could not parse …

开始学习 Kafka,一文掌握基本概念|Kafka 系列 一

如果你还不了解 Kafka&#xff0c;或者也打算深入探索、系统学习&#xff0c;那么欢迎有同样目标的小伙伴可以加群交流&#xff0c;让学习之路不再孤独。 一个人可能走的很快&#xff0c;但是一群人会走的更远。&#xff08;后台回复&#xff1a;加群&#xff09; 点击上方“后…

微信小程序手写签字版

在这里插入图片描述 wxml 请在下面的白框中签名 重置 提交 # js Page({ data: { signPath: [], cardNo: , preX: , preY: , }, onLoad(options) { this.setData({ cardNo: options.cardNo }) wx.createSelectorQuery().select(#myCanvas).fields({ node: true, size: true }).…

python

文章目录 初识pythonpython的安装win系统Linux系统&#xff08;centos7&#xff09; 第一个Python程序常见问题 Python解释器Python开发环境PyCharm的基础使用创建项目修改主题修改默认字体和大小汉化插件翻译软件常用快捷键 初识python Python语言的起源可以追溯到1989年&…

Ubuntu-文件和目录相关命令

&#x1f52e;linux的文件系统结构 ⛳目录结构及目录路径 &#x1f9e9;文件系统层次结构标准FHS Filesystem Hierarchy Standard(文件系统层次结构标准&#xff09; Linux是开源的软件&#xff0c;各Linux发行机构都可以按照自己的需求对文件系统进行裁剪&#xff0c;所以众多…

17. Spring 事务

目录 1. 事务定义 2. MySQL 中的事务使用 3. 没有事务时的插入 4. Spring 编程式事务 5. Spring 声明式事务 5.1 Transactional 作用范围 5.2 Transactional 参数说明 5.3 Transactional 工作原理 1. 事务定义 将⼀组操作封装成一个执行单元&#xff08;封装到一起…

解决spring.thymeleaf.cache=false不起作用的问题

目录 spring.thymeleaf.cachefalse不起作用thymeleaf缓存关闭 spring.thymeleaf.cachefalse不起作用 配置是清除缓存&#xff0c;实现热部署。 也就是修改了html后不用重启&#xff0c;刷新页面就能看到效果。 修改完html后一定要ctrlf9重新build一下。 再回到浏览器刷新&…

ffplay——QT项目移植

一、ffmpeg源码编译 参考&#xff1a; https://blog.csdn.net/sgzed/article/details/119850119 在生成时做了一些修改&#xff1a; ./configure --toolchainmsvc --enable-shared --enable-postproc --enable-gpl --prefixwindows 二、对文件做调整 ffplay只需要三个文件&…

stm32常见数据类型

stm32的数据类型的字节长度 s8 占用1个byte&#xff0c;数据范围 -2^7 到 (2^7-1) s16 占用2个byte&#xff0c;数据范围 -2^15 到 (2^15-1) s32 占用 4个byte&#xff0c;数据范围 -2^31 到 (231-1)231 2147483647 int64_t占用8个byte&#xff0c;数据范围 -2^63 到 (2^63-1)…

RpcController作用浅析

RpcController作用浅析 前面提到了RpcConsumer的实现思路&#xff0c;但是并没说明RpcController有什么作用&#xff0c;不妨看看google::protobuf::RpcController&#xff1a; class PROTOBUF_EXPORT RpcController {public:inline RpcController() {}virtual ~RpcControlle…