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