Redux
概念-纯函数
函数式编程中有一个非常重要的概念叫纯函数,JavaScript符合函数式编程的范式,所以也有纯函数的概念
在react开发中纯函数是被多次提及的
比如react中组件就被要求像是一个函数式(为什么是像,因为还有class组件),redux中有一个reducer的概念,也是要求必须是一个纯函数
所以掌握纯西数对于理解很多框架的设计是非常有帮助的;
- 纯西数的维基百科定义:
- 在程序设计中,若一个函数符合以下条件,那么这个函数被称为纯函数:
- 此函数在相同的输入值时,需产生相同的输出
- 函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的外部输出无关
- 该函数不能有语义上可观察的函数副作用,诸如“触发事件”,使输出设备输出,或更改输出值以外物件的内容等
- 在程序设计中,若一个函数符合以下条件,那么这个函数被称为纯函数:
- 当然上面的定义会过于的晦涩,所以简单总结一下:
- 确定的输入,一定会产生确定的输出
- 函数在执行过程中,不能产生副作用
- 举例
- slice:slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组
- splice:splice截取数组,会返回一个新的数组,也会对原数组进行修改
- 所以:slice就是一个纯函数,不会修改数组本身,而splice函数不是一个纯函数
- 纯西数的维基百科定义:
redux三大原则
单一数据源
- 整个应用程序的state被存储在一颗object tree中,并且这个object tree只存储在一个store中
- Redux并没有强制让我们不能创建多个Store,但是那样做并不利于数据的维护
- 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
State是只读的
唯一修改State的方法一定是触发action,不要试图在其他地方通过任何的方式来修改State
这样就确保了View或网络请求都不能直接修改state,它们只能通过action来描述自己想要如何修改state
这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行,所以不需要担心race condition (竟态)的问题
使用纯函数来执行修改
- 通过reducer将旧state和actions联系在一起,并且返回一个新的State
- 随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers,分别操作不同state tree的一部分
- 但是所有的reducer都应该是纯函数,不能产生任何的副作用
redux使用过程
- 创建一个对象(initialState),作为我们要保存的状态:
- 创建Store来存储这个state
- 创建store时必须创建reducer
- 我们可以通过 store.getState 来获取当前的state
- 通过action来修改state
- 通过dispatch来派发action
- 通常action中都会有type属性,也可以携带其他的数据
- 修改reducer中的处理代码
- 这里一定要记住,reducer是一个纯西数,不需要直接修改state
redux结构划分
- 创建store/indexjs文件
- 创建store/reducer.js文件
- 创建store/actionCreators.js文件
- 创建store/constants.js文件
- 注意:node中对ES6模块化的支持
- 从node v13.2.0开始,node才对ES6模块化提供了支持:
- node v13.2.0之前,需要进行如下操作:
- 在packagejson中添加属性:”type”:“module”;
- 在执行命令中添加如下选项:node –experimental-modules src/indexjs;
- node v13.2.0之后,只需要进行如下操作:
- 在packaceison中添加属性:”tvpe”:”module”
- 注意:导入文件时,需要跟上js后缀名
- node v13.2.0之前,需要进行如下操作:
- 从node v13.2.0开始,node才对ES6模块化提供了支持:
认识ReduxToolkit
Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。redux的编写逻辑过于的繁琐和麻烦,并且代码通常分拆在多个文件中(星然也可以放到一个文件管理,但是代码量过多,不利于管理);Redux Toolkit包旨在成为编写Redux逻辑的标准方式,从而解决上面提到的问题;在很多地方为了称呼方便,也将之称为“RTK”;
Redux Toollkit的核心API主要是如下几个:
- configureStore:包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的slice reducer, 添加你提供的任何 Redux 中间件,redux-thunk默认包含,并启用 Redux DevTools Extension。
- createSlice:接受reducer函数的对象、切片名称和初始状态值,井自动生成切片reducer,并带有相座的actions
- createAsyncThunk:接受一个动作类型字符申和一个返回承诺的西数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!