Redux使用指南

00-简介

本文主要是用来记录Redux结合React的使用过程,帮助大家在使用Redux的时候,能够更好的理解Redux,从而更好地使用它

01-为什么需要Redux

JavaScript的应用程序越来越复杂了,需要管理的状态也越来越多了

这些状态包括服务器返回的数据,缓存数据,用户操作产生的数据,也包括一些UI的状态
我们要管理不断变化的状态是非常困难的

状态之间会互相依赖,一个状态的变化会引起另一个状态的变化,view页面的变化也可能会引起状态的变化

如果我们想要去追踪一个状态的变化是非常难的,因为我们不知道状态在什么时候发生了变化,因为什么原因发生了变化
React在视图层帮助我们解决了DOM的渲染过程,但是State依然是交给我们自己来进行管理的

例如组件自己定义的state,父子组件通过props传递信息,亦或是通过context进行全局共享状态

React的核心思想UI=render(state)
说到底,Redux是一个帮助我们管理状态的容器,我们可以将需要管理的状态放进这个容器中,这个容器给我们提供了可预测的状态管理功能

02-Redux的核心理念

store
action
reducer

Store:它是Redux提供给我们存储所有状态的容器,这也是我们寻找状态的地方
action:它是一个JS对象类型的数据,是用来定义状态的变化行为,主要由type和数据组成
```
const changeStateAction={type:"CHANGESTATE",state:state}
const IncrementAction={type:"INCREMENT"}
```
可以看到 type是用来定义状态发生改变的原因的,state就是你想要改变的状态数据,这个state可加可不加,看自己的需求

这样子使用action,我们可以很明确的知道,状态改变的原因是什么,方便我们跟踪状态和预测状态

在Redux中,所有的action都是需要通过dispatch进行更新数据的,这一定请大家牢记
reducer:这是Redux关键的一个地方,它是负责将action和state联系起来的一个纯函数

它可以将state和action结合起来生成一个新的state

03-Redux的三大原则

单一数据源
- 整个应用程序的state被存储在一棵object tree中,并且这个Object Tree只存储在一个Store中
- 单一数据源可以让整个应用程序的state变得方便维护,追踪和修改
State是只读的
- 唯一修改state的途径就是通过dispatch action,不要使用其他的方法去修改state
- 这样子的好处就是我们可以对状态进行集中管理修改,并且会按照严格的顺序执行,不需要担心 race condition(竞态)问题
- 这里解释一下竞态的概念
  
  竞态:对于同样的输入，程序的输出有时候正确而有时候却是错误的。这种一个计算结果的正确性与时间有关的现象就被称为竞态（RaceCondition）
使用纯函数来执行修改

只执行修改应该修改的状态,不会修改其他地方的状态,非常安全,修改状态不用担心会影响其他的地方

我来解释一下纯函数的概念
先来看下维基百科的定义
- 在程序设计中，若一个函数符合一下条件，那么这个函数被称为纯函数：
1. 此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关.
2. 该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。 n 当然上面的定义会过于的晦涩，所以我简单总结一下： p 确定的输入，一定会产生确定的输出； p 函数在执行过程中，不能产生副作用；
总结
1. 确定的输入有确定的输出
2. 在执行过程中,不会产生副作用.举个例子,俗话说的好,是药三分毒,吃药虽然能治病,但是或多或少会影响我们身体的其他地方,这就是副作用.纯函数就像吃药不会对身体产生任何不好影响,100%有益,大家可以这么理解这句话