大佬教程收集整理的这篇文章主要介绍了angularjs – 是否有可能使用$rootScope作为商店在Angular 1中实现类似Redux的架构?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到它的方式,可以做如下:
>对于商店/模型 – >使用$rootScope
>对于store.dispatch(ACTION) – >使用$rootScope.$broadcast(ACTION)
> Reducers将被实现为注入$rootScope并执行$on(ACTION)的服务
>控制器可以使用$watch监视$rootScope上的更改并更新视图或视图可以直接绑定到$rootScope属性
只要您遵守规则,不要在$rootScope属性上做出奇怪的异地突变,将所有应用程序逻辑保留在Reducers中并将控制器代码保持在最低限度,我可以看到的最大缺点是性能可怕到Angular 1昂贵的消化周期.但是,如果你也可以坚持不可变的数据结构,甚至可能不是这样.
这是一个坏主意吗?有人试过吗?
让我们来看看:
// 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和digest,你可能想要避免.
此外,你不能订阅所有的更新,没有一个点重置像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}); });
以上是大佬教程为你收集整理的angularjs – 是否有可能使用$rootScope作为商店在Angular 1中实现类似Redux的架构?全部内容,希望文章能够帮你解决angularjs – 是否有可能使用$rootScope作为商店在Angular 1中实现类似Redux的架构?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。