三分钟入门Redux(Redux教程)

news/2024/7/4 9:19:11

学习背景:

我最近在更新师兄之前用React写的项目,该项目中各组件的状态依赖关系非常复杂,为了便于管理组件的状态,师兄使用了Redux。我最近刚转React,此前没有用过Redux,借这个难得的机会,我学习了Redux并对其相关知识点进行了梳理。

一 Redux解决了什么问题?

学习react的朋友都知道组件化是react最擅长的方面,但是在实际开发中,随着应用复杂度地不断提升,组件之间的状态通信变得越来越多,组件之间的耦合也变得越来越重。

这时,Redux诞生了,Redux对所有“组件”说:“你们不要在一对一地写信通知状态了,我是组件群的‘通信云盘’,你们把公共状态存在我这,只要某个状态一改变,各组件都能取到状态的最新值。“

二 使用Redux需掌握哪些最精髓的API?

(1)store: store对象是保存公共数据的地方,一个应用只能创建一个store。下面是创建store方式:

import { createStore } from 'redux';

const store = createStore(function);

(2)state:state是store映射的数据集合,一个 state 只对应一个 view,下面是创建state方法:

import { createStore } from 'redux';
const store = createStore(function);
const state = store.getState(); // 通过store.getState()拿到state

(3)action:state和view捆绑在一起,view发生变化时会用action发出通知。action是改变state的唯一方法,它本质是一个对象,必须要写一个代表action名称的属性——type。除此之外,其他属性可以自由设置,下面是action对象示例:

const action = {
  
  type: 'student_age',
  
  age: 12
};

(4)store.dispatch():store.dispatch()是 view 发出 action 的唯一方法,也可以理解为发射action通知的唯一方法。下面是使用store.dispatch()的代码示例:

store.dispatch({
  type: 'student_age',
  age: 12
});

(5)reducer:reducer是一个计算state的函数,接受两个参数,当前的state和action。当store收到action通知后,一定要返回一个全新的state,这样view才能发生变化。store接收到action传来的数据,然后根据逻辑计算数据,这个过程就称为reducer。下面是reduer的代码示例:

import { createStore } from 'redux';
const reducer = (state = defaultState, action) => { 
  switch (action.type) {
    
    case 'student_age':
      
      return state + action.age;
    
    default: 
      
      return state;
  
}
};

const store = createStore(reducer); // 生成store时传入reducer

实际开发中要在生成store时传入reducer,这样store.dispatch()会自动触发reducer函数执行。

(6)store.subscribe():store.subscribe()监听state变化,state一旦变化就自动触发该函数。下面是它的代码示例:

import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);

三 Redux的运行原理是什么?

redux原理图

四 store有哪些重要方法?

store的重要方法

  

http://www.niftyadmin.cn/n/2747050.html

相关文章

字符串的切片操作与连接_Python中14个切片操作,你常用哪几个?

切片(Slice)是一个取部分元素的操作,是Python中特有的功能。它可以操作list、tuple、字符串。Python的切片非常灵活,一行代码就可以实现很多行循环才能完成的操作。切片操作的三个参数 [start: stop: step] ,其中start…

spring中的统一异常处理

在具体的SSM项目开发中,由于Controller层为处于请求处理的最顶层,再往上就是框架代码的。因此,肯定需要在Controller捕获所有异常,并且做适当处理,返回给前端一个友好的错误码。 不过,Controller一多&#…

arraylist从大到小排序_十大经典排序算法最强总结(内含代码实现),建议收藏!...

点击上方“Java之间”,选择“置顶或者星标”你关注的就是我关心的!来源:cnblogs.com/cndarren/p/11787368.html上一篇:ArrayList集合为什么不能使用foreach增删改01 算法分类 十种常见排序算法可以分为两大类:比较类…

ret和retf

ret指令用栈中的数据,修改IP的内容,从而实现近转移; retf指令用栈中的数据,修改CS和IP的内容,从而实现远转移。 CPU执行ret指令时,进行下面两步操作: (IP) ((ss)*16(sp))(sp)(sp)2CPU执行retf指令时,进行下…

opengl实现经纹理映射的旋转立方体_立方体纹理

立方体纹理就是包含6个2D纹理的纹理.6个纹理有序排列在立方体的6个面.其可以通过方向向量采样立方体纹理上的纹素.创建立方体贴图跟创建2D贴图一样,但是绑定到GL_TEXTURE_CUBE_MAP上.glGenTextures(1, &CubeMapID); glBindTexture(GL_TEXTURE_CUBE_MAP, CubeMapID);立方体纹…

rocketmq广播消息为什么不能重试_RocketMQ系列(五)广播与延迟消息

今天要给大家介绍RocketMQ中的两个功能,一个是“广播”,这个功能是比较基础的,几乎所有的mq产品都是支持这个功能的;另外一个是“延迟消费”,这个应该算是RocketMQ的特色功能之一了吧。接下来,我们就分别看…

数据结构 二叉树 根据后序和中序遍历输出先序遍历

根据后序和中序遍历输出先序遍历 题目描述: 本题要求根据给定的一棵二叉树的后序遍历和中序遍历结果,输出该树的先序遍历结果。 输入格式: 第一行给出正整数N(≤30),是树中结点的个数。随后两行,每行给出N个整数,分别…

adplayer移植【转】

本文转载自:https://blog.csdn.net/qq361294382/article/details/50525412 这两天做madplayer移植,由于是刚装的ubuntu14.04,所以有好多库没装,还有其它未配置起来的地方,搞起来有几个问题,不过组后按着教程…