2017-08-18 19 views
0

我试图理解通量架构解决的实际问题。Flux Architecture如何比MVC更好

第一和主要问题

  • 商店作为一个国家的管理。来自redux(flux架构实现)操作的示例 - > store(reducer) - > view。这是管理状态的简单方法。

但是在很多博客文章中他们都谈论MVC /双向数据绑定。 我认为这是错误的,因为我没有看到通量架构如何关心双向数据绑定。 例如:

angularJs登录应用程序:

<div ng-controller="loginCtrl"> 
    username<input ng-model="username"> 
    password<input ng-model="password"> 
    <button ng-click="submit()">Send</button> 
</div> 

脚本:

angular.module('app',[]).controller('loginCtrl', function($scioe) { 
    $scope.submit = function() { 
    globalStore.dispatch({ 
     action: 'LOGIN', 
     payload: { 
     username: $scope.username, 
     password: $scope.password 
     } 
    }) 
    } 
}) 

当然,我不这样做在实际应用中,但在这个例子中,我可以使用双向数据绑定和商店。 在这种情况下,FLUX VS MVC的解释是,一个更改可以循环回来并在代码库中产生级联效应(使调试和理解变得非常复杂)。

在这种情况下FLUX VS MVC他们说的是磁通落实好通量

所以我尝试在flux official site了解通量架构,它们共享一个YouTube视频,并解释MVC是变得复杂,并能infinte循环。

我的问题:

  1. 什么是通量架构解决了问题?
  2. 什么是MVC或/和双向绑定问题的实例。

回答

0

我认为你必须更多地考虑MVC vs CBA(基于组件的架构)而不是Redux vs MVC。

Redux可帮助您在组件之间同步状态,并在您获得共享状态的复杂组件树时真正发光。

我想向您指出这个优秀的演示文稿,可以帮助您了解在基于组件的体系结构中使用Redux的好处。

在角2治国 - 圣路易斯角午餐 - 凯尔柯达士 https://youtu.be/eBLTz8QRg4Q

+0

非常感谢你,我填补了这个角色2从redux(flux架构)中得到一个好处......在一个地方的状态。我fillredux不vs mvc,它是一个模型(状态)的mvc,角2组件是控制器+视图 – Alin

0

Facebook创建了Flux模式来巩固很多React组件之间的状态管理。有了React,每个组件都能够保持自己的状态。因此,我们需要小心如何为我们的组件构建架构。通常来说,我们试图将开发视为一个大型组件,其中有许多较小的组件,其中大部分状态管理由最外面的组件维护。这适用于很多事情,但不是一切。

因此Flux被发明来补充React的单向数据流,以帮助创建一个更容易推理React组件之间的状态系统。 Redux是Flux的一个类似实现,但它使得它更容易推理,因为Redux只有一个由所有组件共享的状态存储。

为了总结Flux和Redux试图解决的整个问题,我们必须考虑一个孤立组件能够与另一个孤立组件有效通信的替代方案。 React具有父级子元素的单向流,但是当我们需要在其外部进行通信时会发生什么?那就是在组件外部拥有状态存储的地方很有意义。相反,在组件之间设置手动事件和事件监听器会非常快速。

+0

感谢您的回答!我明白了Facebook的问题,了解通量,但我不发现MVC的问题,他们只使用单一模式(存储)所有数据和所有组件订阅单个模型(商店)。哪里有双向数据绑定或者mvc的问题?如果你的应用增长开始成为无限循环,我无法找到这个场景的例子。 – Alin