Redux

Redux

0. 纯函数知识补充

1.1. 理解JavaScript纯函数

• 1. 函数式编程中有一个非常重要的概念交纯函数，JavaScript符合函数式编程的范式，也有纯函数的概念；
  • 1.1. 在React开发中纯函数式有被多次提及的；
  • 1.2. 比如react中组件就被要求像是一个纯函数(为什么是像，因为class组件)， redux中有有一个reducer的概念，也是要求必须是一个纯函数；
  • 1.3. 所以掌握纯函数对于理解很多框架的设计是非常有帮助的；
• 2. 纯函数的维基百科定义：
  • 2.1. 在程序设计中，若有一个函数符合以下条件，那么这个函数被称为纯函数：
  • 2.2. 此函数在相同的输入值时，需产生相同的输出。
  • 2.3. 函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
  • 2.4. 该函数不能有语义上可观察的函数副作用，诸如"触发事情"，使输出设备输出，或更改输出值以外物件的内容等；
• 3. 当然上面的定义过于晦涩，所以我简单总结一下：
  • 3.1. 确定的输入，一定会阐述确定的输出；
  • 3.2. 函数在执行的过程中，不能产生副作用

1.2. 副作用概念的理解

• 1. 那么这里又有一个概念：叫做副作用，什么是副作用呢？
  • 1.1. 副作用(side effect)其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一些其他的副作用；
  • 1.2. 在计算机科学中，也引用了副作用的概念，标识在执行一个函数时，除了返回函数值之外，还对掉一共函数产生了附加的影响，
    比如修改了全局变量，修改参数或者改变外部的存储
• 2. 纯函数在执行的过程中就是不能产生这样的副作用：
  • 副作用往往是产生bug的"温床"

1.3. 纯函数的案例

• 1. 我们来看一个对数组操作的两个函数：
  • slice：slice截取数组时不会对原数组进行任何操作，而是生成一个新的数组；
  • splice：splice截取数组，会返回一个新的数组，也会对原数组进行修改；

• slice就是一个纯函数，不会修改数组本身，而splice函数不是一个纯函数；
  

1.4. 判断下面函数是否纯函数？

• 1. 是纯函数：
     
• 2. 不是纯函数：
     
     

1.5. 纯函数的作用和优势？

• 1. 为什么纯函数在函数式编程中非常重要呢？
  • 1.1. 因为你可以安心的编写和安心的使用；
  • 1.2. 你在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关系传入的内容是如何获得或者依赖其他的外部变量是否已经发生了修改；
  • 1.3. 你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出；
• 2. React中就要求我们无论是函数还是class生命一个组件，这个组件都必须像纯函数一样，保护它们的props不会被修改；
     
• 3. 在接下来学习redux中，reducer也被要求是一个纯函数；

1. Redux的核心思想

1.1. 为什么需要redux?

• 1. JavaScript开发的应用程序,已经变得越来越复杂了:
  • 1.1. JavaScript需要管理的状态越来越多,越来越复杂;
  • 1.2. 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等,也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页;
• 2. 管理不断变化的state是非常困难的:
  • 2.1. 状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;
  • 2.2. 当应用程序复杂时, state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪;
• 3. React是在视图层帮助我们解决了DOM的渲染过程, 但是State依然是留给我们自己来管理:
  • 3.1. 无论是组件定义自己的state, 还是组件之间的通信通过props进行传递; 也包括通过Context进行数据之间的共享;
  • 3.2. React主要负责帮助我们管理视图, state如何维护最终还是我们自己来决定;
  • 
• 4. Redux就是一个帮助我们管理State的容器: Redux是JavaScript的状态容器, 提供了可预测的状态管理;
• 5. Redux除了和React一起使用之外, 它也可以和其他界面库一起来使用（比如Vue）, 并且它非常小 (包括依赖在内, 只有2kb)

1.2. Redux的核心理念 - Store

• 1. Redux的核心理念非常简单。
• 2. 比如我们有一个朋友列表需要管理：
  • 2.1.如果我们没有定义统一的规范来操作这段数据,那么整个数据的变化就是无法跟踪的;
  • 2.2.比如页面的某处通过products.push的方式增加了一条数据;
  • 2.3.比如另一个页面通过products[0].age = 25修改了一条数据;
• 3. 整个应用程序错综复杂，当出现bug时，很难跟增到底哪里发生的变化；
  • 

1.3. Redux的核心理念 - action

• 1. Redux要求我们通过action来更新数据：
  • 1.1. 所有数据的变化，必须通过派发（dispatch）action来更新；
  • 1.2. action是一个普通的JavaScript对象，用来描述这次更新的type和content；
• 2. 比如下面就是几个更新friends的action：
  • 强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可追踪、可预测的；
  • 当然，目前我们的action是固定的对象；
  • 真实应用中，我们会通过函数来定义，返回一个action；

1.4. Redux的核心理念 - reducer

• 0. 如何将state和action联系在一起呢？答案就是reducer
• 1. reducer是一个纯函数；
• 2. reducer做的事情就是将传入的state和action结合起来生成一个新的state;
     
     

2. Redux的基本使用

2.1. Redux的三大原则

• 1. 单一数据源
  • 1.1. 整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个store 中:
  • 1.2. Redux并没有强制让我们不能创建多个Store, 但是那样做并不利于数据的维护;
  • 1.3.单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改;
• 2. State是只读的
  • 2.1.唯一修改State的方法一定是触发action, 不要试图在其他地方通过任何的方式来修改State:
  • 2.2. 这样就确保了View或网络请求都不能直接修改state, 它们只能通过action来描述自己想要如何修改state;
  • 2.3. 这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行, 所以不需要担心race condition（竟态）的问题;

3. 使用纯函数来执行修改
   • 3.1. 通过reducer将旧state和actions联系在一起, 并且返回一个新的State:
   • 3.2. 随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers, 分别操作不同state tree的一部分;
   • 3.3. 但是所有的reducer都应该是纯函数, 不能产生任何的副作用;

2.2. Redux测试项目搭建

• 1. 安装redux:

    npm install redux --save
    // 或 
    yarn add redux

• 2. 创建一个新的项目文件夹：learn-redux

    // 执行初始化操作
    yarn init
  
    // 安装redux
    yarn add redux

• 3. 创建src目录，并且创建index.js文件
• 4. 修改package.json添加type:'module'
     
     

2.3. Redux的使用过程

• 1. 创建一个对象,作为我们要保存的状态:

• 2. 创建Store来存储这个state

• 2.1. 创建store时必须创建reducer;

• 2.2. 我们可以通过 store.getState 来获取当前的state;

• 3. 通过action来修改state

  • 3.1. 通过dispatch来派发action;
  • 3.2. 通常action中都会有type属性,也可以携带其他的数据;
• 4. 修改reducer中的处理代码
  • 4.1. 这里一定要记住,reducer是一个纯函数,不需要直接修改state;
  • 4.2. 后面我会写直接修改state带来的问题;
• 5. 可以在派发action之前,监听store的变化:

2.4. Redux结构划分

• 1. 如果我们将所有的逻辑代码写到一起, 那么当redux变得复杂时代码就难以维护。- 接下来, 我会对代码进行拆分, 将store、reducer、action、constants拆分成一个个文件。
  • 1.1. 创建store/index.js文件:
  • 1.2. 创建store/reducer.js文件:
  • 1.3. 创建store/actionCreators.js文件:
  • 1.4. 创建store/constants.js文件:
• 2. 注意: node中对ES6模块化的支持
  • 2.1. 目前我使用的node版本是v12.16.1, 从node v13.2.0开始, node才对ES6模块化提供了支持:
  • 2.2. node v13.2.0之前, 需要进行如下操作:
    ✓ 在package.json中添加属性: "type": "module"
    ✓ 在执行命令中添加如下选项: node --experimental-modules src/index.js
  • 2.3. node v13.2.0之后, 只需要进行如下操作:
    ✓ 在package.json中添加属性: "type": "module"
• 3. 注意: 导入文件时, 需要跟上.js后缀名;

2.5. Redux使用流程

• 1. redux在实际开发中的流程，
  • 1.1. 创建中心的store，页面组件通过store来订阅数据
  • 1.2. 页面组件中修改数据可以派发action，触发reducer，并返回新的state
  • 1.3. 获取到新的state就会根据新的state来自动告诉订阅页面进行更新数据
  • 1.4. 如下图：
    

2.6. Redux官方图

• 1. Store中数据是由Reducer返回的，在创建Store时，需要传入Reducer
• 2. Reducer会返回一个state，state会作为Store里所存储的数据
• 3. 在UI界面去订阅一些数据，当数据发生改变时，会自动通知订阅的数据进行更新
• 4. UI界面修改数据触发action，action会触发reducer，reducer会返回新的state，state会作为Store所存储的数据，页面会自动更新数据