是否可以使用$ rootScope作为商店在Angular 1中实现类似Redux的架构？

Question

如果你是一个很大的遗留Angular 1代码库并且你不想引入新的依赖项(比如ngRedux),那么开始使用经典的Angular 1功能是一个糟糕的主意,比如$ rootScope,$ broadcast,$ on ,$ watch实现类似Redux的架构？

我看到它的方式,可以做如下:

• 对于商店/模型 - >使用 $rootScope
• 对于store.dispatch(ACTION)- >使用$rootScope.$broadcast(ACTION)
• 减少器将作为注入$rootScope和执行的服务来实现$on(ACTION)
• 控制器可以看更改对$rootScope与$watch和更新一个或多个视图可以直接绑定到$rootScope属性

只要你不遵守$rootScope属性上的奇怪的异地突变,就可以将所有应用程序逻辑保留在Reducers中并将控制器代码保持在最低限度,我可以看到的最大缺点是由于Angular而导致性能下降1个昂贵的消化周期.但是,如果你也可以坚持不可变的数据结构,甚至可能不是这样.

这是一个坏主意吗？有人试过吗？

Answer 1

当然,你可以只使用你的东西$rootScope.但是还有很多其他目的会干扰你的国家.

让我们来看看:

// reducer-like
$rootScope.$on('COUNTER_INCREMENT', (e, action) => {
   //I don't use += to emphase immutability of count property;
   $rootScope.count = $rootScope.count + action.value;
});

//action-ish creator
$rootScope.$broadcast('COUNTER_INCREMENT', {value: 5});

//store subscribe-like
$rootScope.$watch('count', (count) => {
  //update something in your component
})

如果你愿意,你可以这样做,但你会发现存在不明确的不变性问题.很难控制你的动作处理程序是纯粹的,因为实际上并非如此.

没有默认的动作处理程序,您无法轻松设置存储的初始状态.并且您仍然使用$watch和消化,您可能想要避免.

此外,你不能订阅所有的更新,没有一个点重置像Redux这样做的所有时间旅行的东西.

如果你想继续使用Redux作为模式,你可能会以一些帮助程序结束,这将使你的代码更像Redux.

那么,为什么不从一个简单的角度效用服务开始使用Redux:

angular.module('app', []).factory('store', () => {
  //if you have many reducers, they should be as separate modules, and imported here
  function counter(state = 0, action) {
    switch (action.type) {
      case 'INCREMENT':
        return state + action.value;
      default:
        return state;
    }
  }

  // here you can add here middlewares that make Redux so powerful
  return Redux.createStore(counter);
});

开始了.现在,您可以使用商店服务进行操作

angular.module('app').controller('MyController', ($scope, store) => {
  store.subscribe(() => {
    //you may not to care about $scope.$digest, if your action was triggered within angular scope as well 
    $scope.count = store.getState();
  });

  $scope.onClick = () => store.dispatch({type: 'INCREMENT', value: 1});
});

现在,您有一个正确的设置,您的订户不知道导致调度的操作,您的操作创建和操作减少逻辑完全独立,因为它需要Redux模式.