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