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)

使用纯函数来执行修改

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

我来解释一下纯函数的概念

先来看下维基百科的定义

在程序设计中,若一个函数符合一下条件,那么这个函数被称为纯函数:

此函数在相同的输入值时,需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的 外部输出无关.

该函数不能有语义上可观察的函数副作用,诸如“触发事件”,使输出设备输出,或更改输出值以外物件的内容等。 n 当然上面的定义会过于的晦涩,所以我简单总结一下: p 确定的输入,一定会产生确定的输出; p 函数在执行过程中,不能产生副作用;

总结

确定的输入有确定的输出

在执行过程中,不会产生副作用.举个例子,俗话说的好,是药三分毒,吃药虽然能治病,但是或多或少会影响我们身体的其他地方,这就是副作用.纯函数就像吃药不会对身体产生任何不好影响,100%有益,大家可以这么理解这句话

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwjwp.html