一文秒懂对Redux的理解和使用

575 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情

背景

Redux在使用时不依赖任何库,除了可以配合react一起使用外,也可以搭配其他视图库使用,并且redux的文件大小也只有2KB。
Redux: 就是用来共享项目数据的,比如你项目中一个数据好多页面或者地方都要用到,并且要同步数据的变化,也就是说数据变了,所有使用的地方都要立即更新,但是使用props等数据传递太麻烦了,一层层传递上去,又一层层传递下来,实在太繁琐了,Redux就解决了这个问题,简单的实现项目的动态数据共享

核心概念

Redux中有几个核心概念:store、state、action

  1. store:一个数据容器,用来管理和保存这个项目的state,在整个应用中只能有一个store
  2. state:一个对象,在State中存储相应的数据,当开发者需要使用数据时,则可以通过store提供的方法来获取state
  3. action:一个通知命令,用于对state进行修改,通过store提供的方法,可以发起action完成对state的修改

action、createStore和reducer函数

分别是什么?

action是一个通知命令,本质是一个javascript普通对象;
在action中,必须包含一个字符串类型的type属性;
该属性的属性值代表要对state做任何操作,除了type属性外,我们还可以根据任务需求定义action的其他属性;

最终action会通过store传入reducer函数中,来完成对state的修改
createStore就是创建一个store
Redux的使用和其他库一样,也需要引入项目里;
在项目中引入Redux可以直接通过npm安装;
安装命令为:
npm i redux

安装好Redux后,先看一下Redux中核心方法createStore,通过createStore方法可以创建项目中的store;
基本规则如下:

image.png

分析一波

利用createStore创建store时,一定要调入reducer函数,reducer函数的名字可以根据语义进行自行定义,该函数会帮助我们初始化项目的state;
另外后期对state的修改也都会在该函数中进行;
Redux中,所有的数据都会被爆粗按在同一个state对象中,通过store可以发起action修改命令对state命令进行修改;
当发起修改执行时,store会把state和action传入reducer函数中,reducer接受到action后可以根据action的指令对state进行修改,并返回修改后的state;

完整的reducer函数就是上面那个:

image.png reducer本质就是一个函数,该函数有两个参数state和action,另外该函数一定有返回值,返回值就是修改后的新state;

纯函数

在编写reducer时,注意它应该是个纯函数,纯函数即指:

  1. 该函数的执行过程中无任何副作用,如:网络请求、DOM操作、定时器等;
  2. 如果函数的调用参数相同,则永远返回相同的结果,它不依赖程序执行期间函数外部任何状态数据的变化,必须只依赖于其输入参数。

Store

最开始提过store是保存数据的容器,是createStore生成的一个对象,现说一下store对象提供的三个常用方法。

  1. getState:该方法用于获取state;
  2. dispatch:该方法用于发起一个action
  3. subscribe:该方法会注册一个监听器监听state发生的变化,该方法返回值会返回一个注销监听器的方法,用于取消监听器