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使用过程

  1. 创建一个对象(initialState),作为我们要保存的状态:
  2. 创建Store来存储这个state
    1. 创建store时必须创建reducer
    2. 我们可以通过 store.getState 来获取当前的state
  3. 通过action来修改state
    1. 通过dispatch来派发action
    2. 通常action中都会有type属性,也可以携带其他的数据
  4. 修改reducer中的处理代码
    1. 这里一定要记住,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之前,需要进行如下操作:
        1. 在packagejson中添加属性:”type”:“module”;
        2. 在执行命令中添加如下选项:node –experimental-modules src/indexjs;
      • node v13.2.0之后,只需要进行如下操作:
        • 在packaceison中添加属性:”tvpe”:”module”
      • 注意:导入文件时,需要跟上js后缀名

认识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 协议 ,转载请注明出处!