【react+redux】 react使用redux相关内容

首先说一下,文章中所提及的内容都是我自己的个人理解,是我理逻辑的时候,自我说服的方式,如果有问题有补充欢迎在评论区指出。

一、场景描述

为什么在react里面要使用redux,我的理解是因为想要使组件之间的通信更便捷。如下图所示,html中的信息传递只能是通过标签属性来传递,所以如果
我们有一个需求是在某一个组件中获取信息,然后在另一个组件中根据该信息来更改组件显示的内容,这就需要逐层进行信息传递。redux的作用就在于,将该信息保存为全局数据内容,这样所有组件都可以访问到,不用逐层进行信息传递。
在这里插入图片描述

二、相关内容介绍

2.1 typescript中的函数调用签名

函数调用签名的作用是什么:定义函数所接收到参数以及返回值的类型。

type addFunctionType = (a: number, b: number) => number;
//这里是函数调用参数,上面定义了所接收参数以及返回值的类型。
const add: addFunctionType = (a, b) => a + b;
export default add;

2.2 问题分析

首先’react-redux’包里的useSelector用于从redux store中获取state的值,在使用该方法时,它的用法如下。

import {
   
   useSelector} from ‘react-redux’;
//问题就出在这里,如果用原始的函数这里的state就要对他进行类型声明—用any也可以,减少any的使用可以对代码有一定的收益,例如减少bug
const user = useSelector( state:any => state.user);

然后我们就希望拿到这个state的类型,state就是redux中的store.getstate所获得的数据
解释一下下面所要用到的一小段代码。

type IRootType = typeof store.getState;    //取store.getState这个函数的类型
//为什么不是 type IRootType = typeof store.getState(); 
export type FnReturnType = ReturnType<IRootType>;
//函数调用签名 它的作用是定义一个函数类型,包含函数的参数和返回类型
export const useAppSelector: TypedUseSelectorHook<FnReturnType> = useSelector;

在上述代码中我们所得到的store.getState的类型如下图所示。这个函数是用来获取state参数的,它的返回值应该是个对象,是store中所存储的全局变量–redux中存的数据。
在这里插入图片描述
react-redux中useSelector的作用是从redux store中获取state的值。跟直接获取的区别在于:当store中的值发生改变时,会自动渲染组件。
TypedUseSelectorHook的实现如下图所示

interface TypedUseSelectorHook<TState> {
   
   
  //这里的<Tselected>是传入类型的意思,在后面所输入的第一个函数参数里使用 两个参数一个是selector,接收TState 类型的参数,输出Tselected类型的变量
  <TSelected>(
    selector: (state: TState) => TSelected,
    equalityFn?: EqualityFn<NoInfer<TSelected>>
  ): TSelected;
  <Selected = unknown>(
    selector: (state: TState) => Selected,
    options?: UseSelectorOptions<Selected>
  ): Selected;
}

在这里插入图片描述

2.3上述内容总结

请添加图片描述

二、redux相关内容

在介绍redux的内容之前,我们先分析一下需求,一般如果是这样的话,就是在所有组件都能访问到的区域创建数据。

2.1 redux的工作原理

redux的工作原理如下图所示。
图中Store是Redux的一个对象,用于保存应用的状态。–这里就是用于存储全局数据的地方,不能直接更改可以读,需要提供特征的方法进行更改。
Action就是所定义的动作类型,可以包含其他属性,用于传递额外的数据。我的理解就是定义的行为,存储的全局数据可以发生的行为需要提前定义,实际上就是定义的方法。
Reducers:就是根据Action来更新当前的State(全局数据,在react中被定义为状态)。
Dispatch: 用于向Store中发送Action。当调用store.dispatch(action)时,Store会调用reducer来处理action,更新state。
subcri

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值