在Redux出现之前,在构建复杂任务时管理状态是相当痛苦的事情。受Flux应用程序设计模式的启发,Redux设计用于管理JavaScript应用程序中的数据状态。虽然它主要用于React,但是可以使用Redux与不同的框架和库(如jQuery,Angular或Vue)。
Redux确保您的应用程序的每个组件都可以直接访问应用程序的状态,而不必将props发送到子组件,或使用回调函数将数据发送回父组件。
在这篇文章中,我将和大家讨论Redux,它如何根植于函数式编程的概念以及如何决定在应用程序中是否需要它。
为什么我们需要Redux?
组件没有它们的状态吗?为什么你需要一个工具来帮助你管理这个状态呢?不要误会我的意思;React是一个比较出色的框架。可以用一个框架来编写一个完整的应用程序。但是随着应用程序变得越来越复杂,越来越多的组件使用一个框架来管理这个可能变得非常棘手。
这是Redux为你节省一天的地方;它减轻了这种应用中出现的复杂性。如果你有一些React的经验,你会知道React的数据流是这样的,父组件传递道具到子组件。在一个庞大的应用程序中,数据通过状态和props流经很多组件,通信往往容易出错。相信我,你的代码将变得难以阅读甚至很难改进。
再看看下面的图表,你就知道我在说什么:
在React(以及其他框架)中,不鼓励两个不具有父子级关系的组件之间的通信。 React建议,如果你必须这样做,你可以按照Flux的模式建立你的全局事件系统 - 这就是需要Redux的地方。
借助Redux,您可以在store中保留所有应用程序状态。如果组件A中发生状态更改,则会将其中继成到store,并且需要注意组件A中状态更改的其他组件B和C可以读取store数据:
看到了吧?这比我们想象的要好得多。如果我们让组件相互通信,我们会创建一个容易出错和不可读的代码库,但有Redux加入就不同了。
组件A将其状态更改发送到store,如果组件B和C需要此状态更改,则可以从store中获取它。因此,我们的数据流逻辑是无缝的。除了上面这些功能之外,使用Redux还有很多好处,我只想在那里展示我认为最重要的三点:
1.结果的可预测性--只有一个真实的来源(store),当你将你的当前状态与应用程序的actions和其他部分同步时不会出什么问题。
2.可维护性--Redux对应该如何组织代码有严格的指导原则;这进一步确保了可预测的结果,使代码更容易维护。
3.易于测试--在Redux中编写代码涉及到与编写可测试代码的黄金规则相关的纯函数。
你可能不需要Redux
这对你来说可能是显而易见的,但无论如何我会提及它。你不一定要使用Redux。有时候这样做更有意义。如果以上任何一种情况都适用于您,您可能根本不需要Redux:
1.你和你的好友(或同事)已经有了一个预先定义的方式来共享和安排组件状态
2.你还在使用React或其他框架
3.如果您的应用程序将包含大部分简单的操作(如UI更改),则这些操作并不一定是Redux存储的一部分,可以在组件级别进行处理
4.您不需要管理服务器端事件(SSE)或websockets
5.您从每个视图的单个数据源获取数据
Redux的一部分
对于初学者来说,其方法可能会让人迷惑的工具,Redux的库只有2KB,本身由三部分组成:actions,stores和reducers。
Actions
actions只是使用函数创建的事件,并将数据从应用程序发送到store。数据可以通过不同的方式发送,例如提交表单,调用API或基本的用户交互。 Redux中的每个操作都有一个类型属性,用于描述操作的类型以及发送给store的信息的“有效内容”。让我们看看工作中最基本的一个action例子:
要在应用程序中的任何位置调用action,Redux将使用dispatch()方法向Redux存储区发送操作以指示状态更改:
Reducers
由于Redux不允许您的应用程序对状态进行更改并使用dispatch()来执行此操作。 dispatch()只是表示改变状态的意图,实际上并没有改变它...这是需要Reducer进来的地方。
Reducers是一个函数,它通过调度的action来获取应用程序的当前状态,然后返回一个新的状态。查看下面的reducer,它将当前状态和一个操作作为参数,然后返回下一个状态:
在构建更复杂的应用程序时,建议使用Redux的combineReducers()方法。此方法将应用程序中的所有缩减器合并到一个reducer列表中,其中每个reducer处理其应用程序状态的一部分,并且每个reducer的state参数都不相同:
还应该指出的是,Reducers应该用纯粹的函数来编写。下面我列出了这些功能的几个特点:
1.他们不会进行外部网络或数据库调用。
2.它们的返回值仅取决于它们的参数值。
3.他们的论据应该被看作是不变的,这意味着他们不应该被改变。
Store
Store就像Redux的心脏。这就是单一的真理来源,可以保存所有应用程序的状态,并通过几种方法提供对状态的访问,派发操作和注册监听器。任何分派的操作都会通过reducer向store返回一个新状态。看看这个Redux的store基本例子:
函数式编程和Redux
如果你打算使用Redux,你应该知道函数编程是如何工作的。 Redux建立在函数式编程的基础之上,理解函数式编程概念将使您深入了解Redux如何操作。
让我们来看看函数式编程的关键指导原则:
1.它可以使用纯粹的,递归的,高阶的,闭包和匿名函数
2.它可以使用帮助函数,比如map,filter和reduce
3.它可以将功能链接在一起
4.它可以把功能当作一流的对象
5.它可以传递函数作为参数
6.它可以使用函数,递归和数组来控制流 状态不变(即它是不可变的)
7.代码执行的顺序并不重要
函数式编程涉及编写更简单,更小和隔离的函数。遵循这种模式,代码维护,测试和调试变得更容易。由于这些功能很小且独立,因此可以重复使用,因此可以在需要的任何地方复制和粘贴。
这也消除了编写更多的代码,这在我看来是非常棒的。在使用函数式编程时,理解诸如纯函数,匿名函数,闭包和高阶函数等概念是很重要的。
总结
确实,Redux是管理应用程序状态的好选择,Redux也获得了很大的推动力。那么你还需要知道什么?
除了被Uber和Twitter等公司广泛使用外,Redux还在Wordpress等项目上成功实施。当然,Redux并不适合所有的应用程序,这是事实。主要执行简单操作并且不需要服务器端渲染的应用程序可能不需要Redux;他们的行为可以在组件级别进行处理。
领取专属 10元无门槛券
私享最新 技术干货