React中使用Redux (一) - 在React中直接使用Redux_react redux-程序员宅基地

技术标签: react.js  前端  React  javascript  

React中使用Redux

开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux

尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描述界面的状态,Redux可以发射状态的更新, 让他们作出相应; 目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去。

这里我创建了两个组件:

Home组件:其中会展示当前的counter值,并且有一个+1和+5的按钮;

Profile组件:其中会展示当前的counter值,并且有一个-1和-5的按钮;

在这里插入图片描述

首先将结构搭建出来, 然后安装redux库: npm i redux

安装完成后, 安装我们上一篇文章讲解的目录结构, 创建Store文件夹

store/index.js 中创建store

import {
     createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer)

export default store

store/constants.js 中定义变量

export const CHANGE_NUM  = "change_num"

store/reducer.js

import {
     CHANGE_NUM } from "./constants"

const initialState = {
    
  counter: 10
}

export default function reducer(state = initialState, action) {
    
  switch(action.type) {
    
    case CHANGE_NUM:
      return {
    ...state, counter: state.counter + action.num}
    default: 
      return state
  }
}

store/actionCreators.js

import {
     CHANGE_NUM } from "./constants"

export const changeNumAction = (num) => ({
    
  type: CHANGE_NUM,
  num
})

store中编写完成后, 在Home和Profile页面中使用store中的state, 核心代码主要是两个:

在 componentDidMount 中监听store的变化,当数据发生变化时重新设置 counter;

在发生点击事件时,调用store的dispatch来派发对应的action;

  • Home组件
import React, {
     PureComponent } from 'react'
import store from '../store'
import {
     changeNumAction } from '../store/actionCreators'

export class Home extends PureComponent {
    
  constructor() {
    
    super()

    this.state = {
    
      counter: store.getState().counter
    }
  }

  // 核心一: 在componentDidMount中监听store的变化,当数据发生变化时重新设置 counter;
  componentDidMount() {
    
    store.subscribe(() => {
    
      const state = store.getState()
      this.setState({
     counter: state.counter })
    })
  }

  // 核心二: 在发生点击事件时,调用store的dispatch来派发对应的action;
  changeNum(num) {
    
    store.dispatch(changeNumAction(num))
  }

  render() {
    
    const {
     counter } = this.state

    return (
      <div>
        <h2>Home</h2>
        <h2>当前计数: {
    counter} </h2>
        <button onClick={
    () => this.changeNum(1)}>+1</button>
        <button onClick={
    () => this.changeNum(5)}>+5</button>
      </div>
    )
  }
}

export default Home
  • Profile组件
import React, {
     PureComponent } from 'react'
import store from '../store'
import {
     changeNumAction } from '../store/actionCreators'

export class Profile extends PureComponent {
    
  constructor() {
    
    super()

    this.state = {
    
      counter: store.getState().counter
    }
  }

  componentDidMount() {
    
    store.subscribe(() => {
    
      const state = store.getState()
      this.setState({
     counter: state.counter })
    })
  }

  changeNum(num) {
    
    store.dispatch(changeNumAction(num))
  }

  render() {
    
    const {
     counter } = this.state

    return (
      <div>
        <h2>Profile</h2>
        <h2>当前计数: {
    counter}</h2>
        <button onClick={
    () => this.changeNum(-1)}>-1</button>
        <button onClick={
    () => this.changeNum(-5)}>-5</button>
      </div>
    )
  }
}

export default Profile

我们发现Home组件和Profile组件中的代码是大同小异的, 所以这不是我们最终编写的代码, 后面还会对代码进行优化

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_71485750/article/details/126747191

智能推荐

aiXcoder插件安装使用_aixcoder-0.1.12-comm-程序员宅基地

文章浏览阅读713次。https://aixcoder.com/#/localServer法1:将解压缩后「server」目录下的所有文件,手动移动到 C:\Users\24390\aiXcoder\installer\localserver2\current\server下(24390是我的用户文件夹名)法2:直接运行install_localserver.bat文件..._aixcoder-0.1.12-comm

【可供参考】tmux配置文件_# switch panes using alt-arrow without prefix-程序员宅基地

文章浏览阅读317次。# 0 is too far from ` ;)set -g base-index 1# Automatically set window title#set-window-option -g automatic-rename on#set-option -g set-titles on# Send prefixset-option -g prefix C-a unbind-k..._# switch panes using alt-arrow without prefix

PowerDesigner 连接oracle直接生成数据库表的方法_powerdesigner生成oracle表-程序员宅基地

文章浏览阅读586次。创建于 2012-05-08迁移自个人的百度空间--------------------------------首先机子要装有oracle驱动程序(在装oracle服务器端或客户端就自动安装上的oracle的驱动程序) 然后依据下面步骤:1、database-&gt;generate database 2、general-&gt;Direct generation 如果没有..._powerdesigner生成oracle表

学习JAVA容器之Collections工具类_java 容器工具类-程序员宅基地

文章浏览阅读167次。Collections是一个可以操作set map list的工具类常用方法:T 19:57:25●排序操作: (均为static方 法)➢reverse(List):反转List中元素的顺序➢shuffle(List):对List集合元素进行随机排序➢sort(List):根据元素的自然顺序对指定List 集合元素按升序排序➢sort(List,Comparator): 根据指定..._java 容器工具类

让你提前认识软件开发(47):同行评审_代码同级评审-程序员宅基地

文章浏览阅读3.5k次,点赞5次,收藏4次。第3部分 软件研发工作总结同行评审 在《浪潮之巅》这本书中,吴军老师描述了在Google早期的工作方式,其中有一段是这么写的:我一般会在吃完晚饭后把代码修改的清单发给克雷格做代码审核,他一般晚上10点左右会回复我,给我修改意见,详细到某一行多了一个空格。 吴军老师所描述的内容,其实就是软件开发中的同行评审流程。 几乎在所有的软件项目中,都需要同行评审。_代码同级评审

Vue性能优化_vue 应用性能优化指南-程序员宅基地

文章浏览阅读3.1k次。前言一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路。性能瓶颈在哪里?先看一下常见的vue写法:在html里放一..._vue 应用性能优化指南

随便推点

Linux—nmap、nc命令 –网络探测工具和安全和端口扫描器_nmap 和 nc-程序员宅基地

文章浏览阅读2k次,点赞4次,收藏6次。文章目录nmap命令语法格式:常用参数:参考实例:nc命令语法格式:常用参数:参考实例:nmap命令nmap (“Network Mapper(网络映射器)”) 是一款开放源代码的 网络探测和安全审核的工具。它的设计目标是快速地扫描大型网络,当然用它扫描单个 主机也没有问题。Nmap以新颖的方式使用原始IP报文来发现网络上有哪些主机,那些主机提供什么服务(应用程序名和版本),那些服务运行在什么操作系统(包括版本信息), 它们使用什么类型的报文过滤器/防火墙,以及一堆其它功能。虽然Nmap通常用于安全审核_nmap 和 nc

发票查验API-票据管理自动化_发票查验api是免费的吗-程序员宅基地

文章浏览阅读346次。现如今,随着经济的不断发展,社会的不断进步,企业模式的不断转型,越来越多的业务需要发票进行报销,也正是随着发票的普及,越来越多的假发票混入我们的生活,一些不法分子以此为商机,制售假发票为他人报销提供非正常途径。为防止假发票、问题发票入账,企业要求财务工作者在接收到发票时必须做到“先查验、后报销、再入账”,但如此一来,企业产生的海量发票无疑增加了财务人员的工作量。对于发票查验量小的企业而言,可以通过上税务局官网的方式一张一张免费进行查询,但对于发票查验需求量大的企业而言,传统人工查验的方式不仅速度慢、效率低_发票查验api是免费的吗

win7下安装oracle时,提示程序异常终止,发生未知错误_error in process: e:\oracle\product\19.3.0.0\db_1\-程序员宅基地

文章浏览阅读4.5k次。1、修改oracle安装包内refhost.xml文件2、修改oracle安装包内oraparam.in文件3、以兼容模式运行这个程序,并选择 windows xp(service pack 3)4、以管理员身份运行_error in process: e:\oracle\product\19.3.0.0\db_1\bin\orapwd.exe

Disruptor框架详解-程序员宅基地

文章浏览阅读5.7k次。1.x disruptor框架介绍与Hello World2.x disruptor 详细说明与使用3.x disruptor 应用(并发场景实例讲解)1.1 Disruptor并发框架简介Martin Fowler在自己网站上写了一篇LMAX架构的文章,在文章中他介绍了LMAX是一种新型零售金融交易平台,它能够以很低的延迟产生大量交易。这个系统是建立在JVM平台上,其核心是一个业..._disruptor

星速配资:高毅资产持股量位居首位-程序员宅基地

文章浏览阅读122次。高毅资产在二季度仍是当之无愧的“持有王”,不仅延续一季度对海康威视、紫光国微、紫金矿业和睿创微纳的青睐,还新进了天山铝业、恒立液压、华润三九、久立特材和西部超导等5只个股。据数据显示,二季度高毅资产持有24只个股,合计持有市值为374.42亿元,其中,持有的海康威视市值就高达138.68亿元;其次,持有的紫金矿业市值达68.35亿元;从持股量或持有市值来看,高毅资产均居首位。同时,玄元投资和迎水投资也在同期持有不少个股。玄元投资二季度持有三棵树、中泰化学、伊之密、聚隆科技和沃尔核材等17只个股,合计

1、在不配置CATALINA_HOME环境变量的情况下启动tomcat-程序员宅基地

文章浏览阅读594次。场景:tomcat执行startup.bat的时候,会寻找全局环境变量CATALINA_HOME,如果CATALINA_HOME对应的tomcat目录不是当前tomcat的目录,则就会启动报错,解决方法如下:1、打开bin目录下的startup.bat文件,添加如下代码:这样的话,当前tomcat启动时,就会使用当前的tomcat,而不会去使用环境变量CATALINA_HOM..._linux 启动tomcat 不使用系统变量catalina_home