持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情
背景
Redux在使用时不依赖任何库,除了可以配合react一起使用外,也可以搭配其他视图库使用,并且redux的文件大小也只有2KB。
Redux: 就是用来共享项目数据的,比如你项目中一个数据好多页面或者地方都要用到,并且要同步数据的变化,也就是说数据变了,所有使用的地方都要立即更新,但是使用props等数据传递太麻烦了,一层层传递上去,又一层层传递下来,实在太繁琐了,Redux就解决了这个问题,简单的实现项目的动态数据共享。
核心概念
在Redux中有几个核心概念:store、state、action。
store:一个数据容器,用来管理和保存这个项目的state,在整个应用中只能有一个store。state:一个对象,在State中存储相应的数据,当开发者需要使用数据时,则可以通过store提供的方法来获取state。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;
基本规则如下:
分析一波
利用createStore创建store时,一定要调入reducer函数,reducer函数的名字可以根据语义进行自行定义,该函数会帮助我们初始化项目的state;
另外后期对state的修改也都会在该函数中进行;
Redux中,所有的数据都会被爆粗按在同一个state对象中,通过store可以发起action修改命令对state命令进行修改;
当发起修改执行时,store会把state和action传入reducer函数中,reducer接受到action后可以根据action的指令对state进行修改,并返回修改后的state;
完整的reducer函数就是上面那个:
reducer本质就是一个函数,该函数有两个参数state和action,另外该函数一定有返回值,返回值就是修改后的新state;
纯函数
在编写reducer时,注意它应该是个纯函数,纯函数即指:
- 该函数的执行过程中无任何副作用,如:网络请求、DOM操作、定时器等;
- 如果函数的调用参数相同,则永远返回相同的结果,它不依赖程序执行期间函数外部任何状态数据的变化,必须只依赖于其输入参数。
Store
最开始提过store是保存数据的容器,是createStore生成的一个对象,现说一下store对象提供的三个常用方法。
getState:该方法用于获取state;dispatch:该方法用于发起一个action;subscribe:该方法会注册一个监听器监听state发生的变化,该方法返回值会返回一个注销监听器的方法,用于取消监听器;