第44节——redux store

一、概念

Redux 是一个用于管理 JavaScript 应用状态的库。在 Redux 中,整个应用的状态都存储在一个对象中,称为 store。

Store 实际上是一个 JavaScript 对象,它存储了整个应用的状态。它是唯一的,意味着应用中只有一个 store。每当状态发生变化,它会存储最新的状态。

使用 Redux 时,你可以通过调用 store.getState() 来获取当前应用的状态,通过调用 store.dispatch(action) 来更新应用的状态,其中 action 是一个描述发生了什么的对象。

总的来说,store 是 Redux 应用的核心部分,它存储了整个应用的状态,并提供了读取和更新状态的方法

二、定义store

创建一个store.js文件

import { createStore } from 'redux';// 定义初始状态
const initialState = {count: 0
};// 定义reducer
function reducer(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;}
}// 使用createStore创建store
const store = createStore(reducer);export default store

三、页面中获取store中定义的数据

import React from 'react';
import { useSelector } from 'react-redux';function Counter() {/*** 使用useSelector这个钩子来获取store中的state* 接收一个回调函数,state就是我么你定义的state* 需要那个属性可以直接return对象的属性*/const count = useSelector(state => state.count);return (<div><div>Count: {count}</div></div>);
}export default Counter;

三、store常用的方法

1、store.getState

// 返回应用当前的 state。 它与 store 的最后一个 reducer 返回值相同。
store.getState()

2、store.dispatch

// dispatch action。这是触发 state 变化的惟一途径。store.dispatch()

3、store.subscribe

添加一个变化监听器。每当 dispatch action 的时候就会执行,state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。返回一个可以销毁监听的函数。

const unsubscribe = store.subscribe(handleChange)

三、模块化处理

1、combineReducers

使用combineReducers可以对redux进行模块化管理,在 Redux 中,你可以使用多个 Reducer 来处理不同的数据,然后使用 combineReducers 函数将它们合并起来。

2、创建user模块

创建user.js

const defaultState = {};const userReducer = (state = defaultState, action) => {switch (action.type) {case "UPDATE_USER":return { ...state, ...action.payload };default:return state;}
};export default userReducer;

3、在store.js中引入,并使用combineReducers合并

import { legacy_createStore as createStore, combineReducers } from "redux";
import user from "./user";const rootReducer = combineReducers({// 知己诶使用es6的语法,那么这个模块的名字就是useruser,
});// 创建 store
const store = createStore(rootReducer);// 导出 store
export default store;

4、页面中获取store

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';function Counter() {/*** 使用useSelector这个钩子来获取store中的state* 接收一个回调函数,state就是我么你定义的state* 需要那个属性可以直接return对象的属性* */// const count = useSelector(state => state.count);/*** 如果我们对redux分过模块* 那么我们使用state.user先找到对应的模块再去* 获取里面的属性*/const state = useSelector((state) => state.user)return (<div><p>Name: {state.name}</p></div>);
}export default Counter;

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

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

相关文章

操作系统初探 - 进程的概念

目录 预备知识 冯诺依曼和现代计算机结构 操作系统的理解 进程和PCB的概念 PCB中的信息 查看进程信息的指令 - ps pid 进程状态 预备知识 在学习操作系统之前我们需要先了解一下如下的预备知识。 冯诺依曼和现代计算机结构 美籍匈牙利科学家冯诺依曼最先提出“程序存…

POJ 3109 Inner Vertices 离散化+树状数组

一、题目大意 围棋棋盘&#xff0c;如果某个坐标上下左右的四个方向都存在棋子&#xff0c;那么ans1&#xff0c;根据输入的棋子数量&#xff0c;求出ans的数量。 二、解题思路 题目中有说到如果程序不会结束&#xff0c;那么输出-1&#xff0c;这其实是无源之水&#xff0c…

altera FPGA 程序固化命令

altera FPGA 程序固化命令 一、命令解析 1&#xff09;sof文件转为flash文件的命令&#xff1a; qsys_sdram.sof为sof文件名称&#xff0c;hwimage.flash为生成的flash名称&#xff0c;针对不同的工程只需要更改这两个地方就可以 sof2flash --inputqsys_sdram.sof --outputh…

力扣第239题 c++滑动窗口经典题 单调队列

题目 239. 滑动窗口最大值 困难 提示 队列 数组 滑动窗口 单调队列 堆(优先队列) 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的…

【爬虫】用wget命令爬虫的简易教程

文章目录 1. 获取登录的请求2. 用postman模拟登录请求3. 用wget模拟登录请求并保存cookie4. 开始爬取网站5. 查看爬取结果6. 网站爬虫简易教程 爬取需要登录的网站的资源 背景&#xff1a;对于一些网站需要使用用户名和密码登录并且使用了https&#xff0c;我们如果不通过凭证将…

数据库表操作详解

在数据库管理中,表操作是最基础也最常用的一项功能。不论是临时存储一些数据,还是通过派生表进行复杂的查询,表操作的灵活性和多样性都使其在数据库中发挥着重要的作用。 本文将详细解析数据库中常见的表操作,包括临时表、派生表以及与视图、子查询的比较。我们将使用游戏…

Flutter开发环境的配置

2023-10最新版本 flutter SDK版本下载地址 https://flutter.cn/docs/development/tools/sdk/releases gradle各版本快速下载地址 https://blog.csdn.net/ii950606/article/details/109105402 JAVA SDK下载地址 https://www.oracle.com/java/technologies/downloads/#java…

代码随想录算法训练营第五十六天 | 1143. 最长公共子序列 1035.不相交的线 53. 最大子数组和

1. 最长公共子序列 1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; 最长公共子数组必须连续&#xff0c;所以一旦元素不相等&#xff0c;当前的最长公共长度不能由前面得来&#xff0c;只能为0 而最长公共子序列&#xff0c;可以断开&#xff0c;所以不相等时…

从0开始python学习-27.selenium 简单登录页面脚本

url https://test.com.cn/login driver.get(url)# 获取登录页面需要输入账号密码进行模拟登录操作 user driver.find_element(By.XPATH,//*[id"username"]).send_keys(username) pwd driver.find_element(By.XPATH,//*[id"selfpwd"]).send_keys(123456)…

pytorch模型量化和移植安卓详细教程

十一下雨,在家撸模型,希望对pytorch模型进行轻量化,间断摸索了几天,效果不错,做个总结分享出来。 量化是一种常见的技术,人们使用它来使模型在推断时运行更快,具有更低的内存占用和更低的功耗,而无需更改模型架构。在这篇博客文章中,我们将简要介绍量化是什么以及如何…

【leetocde】128. 最长连续序列

给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 …

win10系统任务栏图标变成白色的解决办法

我平时都是用滴答清单进行管理这个自己的日程代办的&#xff0c;但是今天打开的时候发现这个快捷方式突然变成纯白色的了&#xff0c;重启电脑之后&#xff0c;这个图标的样式仍然没有变化。上网查找解决办法之后&#xff0c;终于搞好了&#xff0c;于是就有了下面的教程。 为什…

大数据Flink(九十五):DML:Window TopN

文章目录 DML:Window TopN DML:Window TopN Window TopN 定义(支持 Streaming):Window TopN 是一种特殊的 TopN,它的返回结果是每一个窗口内的 N 个最小值或者最大值。 应用场景

数据结构—归并排序-C语言实现

引言&#xff1a;归并排序跟快速排序一样&#xff0c;都运用到了分治的算法&#xff0c;但是归并排序是一种稳定的算法&#xff0c;同时也具备高效&#xff0c;其时间复杂度为O(N*logN) 算法图解&#xff1a; 然后开始归并&#xff1a; 就是这个思想&#xff0c;拆成最小子问题…

数据结构与算法----递归

1、迷宫回溯问题 package com.yhb.code.datastructer.recursion&#xffe5;5;public class MiGong {public static void main(String[] args) {// 先创建一个二维数组&#xff0c;模拟迷宫// 地图int[][] map new int[8][7];// 使用1 表示墙// 上下全部置为1for (int i 0; i…

BASH shell脚本篇4——函数

这篇文章介绍下BASH shell中的函数。之前有介绍过shell的其它命令&#xff0c;请参考&#xff1a; BASH shell脚本篇1——基本命令 BASH shell脚本篇2——条件命令 BASH shell脚本篇3——字符串处理 函数是代码重用的最重要方式。Bash函数可以定义为一组命令&#xff0c;在b…

华为数通方向HCIP-DataCom H12-831题库(单选题:161-180)

第161题 某台路由器Router LSA如图所示,下列说法中错误的是? A、本路由器已建立邻接关系 B、本路由器为DR C、本路由支持外部路由引入 D、本路由器的Router ID为10.0.12.1 答案: B 解析: 一类LSA的在transnet网络中link id值为DR的route id ,但Link id的地址不是10.0.12.…

前端设计跨异步处理手段

简单描述下笔者所了解的单bit和多bit信号跨时钟域处理的常见手段。 单bit信号跨时钟域处理手段 电平信号&#xff1a;可以直接打拍处理&#xff1b;脉冲信号&#xff08;原始脉宽需保持至少2个DST时钟宽度&#xff09;&#xff1a;可以直接打拍处理&#xff0c;对同步后脉宽不…

asp.net core mvc Razor +dapper 增删改查,分页(保姆教程)

说明&#xff1a;本demo使用sqlserver数据库&#xff0c;dapper orm框架 完成一张学生信息表的增删改查&#xff0c;前端部分使用的是Razor视图&#xff0c; Linq分页 HtmlHelper。&#xff08;代码随便写的&#xff0c;具体可以自己优化&#xff09; //实现效果如下&#xff0…

介绍如何在Go中使用字符串

字符串是一个或多个字符(字母、数字、符号)的序列&#xff0c;可以是常量或变量。字符串由Unicode组成&#xff0c;是不可变的序列&#xff0c;这意味着它们是不变的。 因为文本是我们日常生活中使用的一种常见数据形式&#xff0c;所以字符串数据类型是编程中非常重要的组成部…