angularjs - 是否可以使用 $rootScope 作为存储在 Angular 1 中实现类似 Redux 的架构？

Question

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

在我看来，它可以按如下方式完成:

对于商店/模型 -> 使用 $rootScope

对于 store.dispatch(ACTION) -> 使用 $rootScope.$broadcast(ACTION)

Reducers 将被实现为服务注入(inject) $rootScope做$on(ACTION)

Controller 可以监视 $rootScope 上的更改与 $watch并更新 View 或 View 可以直接绑定(bind)到 $rootScope房产

只要您遵守纪律，不要在 $rootScope 上进行奇怪的异地突变属性，将所有应用程序逻辑保留在 Reducers 中并将 Controller 代码保持在最低限度，我可以看到的最大缺点是由于 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
})

如果你愿意，你可以这样做，但你会看到一个不明确的问题。很难控制你的 Action 处理程序是纯粹的，因为它实际上不是。

没有默认的操作处理程序，您无法轻松设置 store 的初始状态。而你仍然使用 $watch和摘要，你可能想要避免。

此外，您不能订阅所有更新，没有像 Redux 那样对时间旅行的事情进行单点重置。

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

好吧，为什么不从一个简单的 Angular 实用程序服务开始使用 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});
});

现在你有了一个正确的设置，你的订阅者不知道导致调度的 Action ，你的 Action 创建和 Action 减少逻辑完全独立，因为它是 Redux 模式所要求的。