#xff1a;npm

ngrx/store的时候会出现和angular版本不一致的问题

所以检查一下angular/core的版本…完全基于redux的ngrx方案我们看看在angular中如何实现。

通过一个简单的计数器例子梳理下整个流程

npm

ngrx/store的时候会出现和angular版本不一致的问题

所以检查一下angular/core的版本和ngrx/store的版本是否一致如果不一致升级angular

update

--force。

最好是删除node_modules目录重新下载。

保证安装正常版本一致

创建store目录并且创建如下几个文件

counterReducer(state:numberinitalState,action:Action){switch(action.type){case

INSCRES:return

页面中注入注意angular中使用store和react稍有不同。

没有createStorereducer然后根组件注入的过程而是在具体页面里直接注入到constructor中我们以news页面为例

import

./news.component.html,styleUrls:

})export

{count:Observablenumberconstructor(public

streamstore.pipe(select(count))stream.subscribe(res{console.log(res:,res)})this.countstore.pipe(select(count))}increasement(){this.store.dispatch({type:INSCRES})}decreasement(){this.store.dispatch({type:DESCRES})}reset(){this.store.dispatch({type:RESET})}}然后在具体的页面中使用count

button

(click)increasement()增加increase/buttondivcounter

{{count

(click)decreasement()减少increase/buttonbutton

(click)reset()reset

整体来看和react中使用redux并没有太大的差异。

唯一的差异就是在react中需要定义storelet

storecreateStore(state,)angular中直接通过在页面中注入的方式完成。

//actions

angular/platform-browser;import

{CountAction}

ngrx/store;registerLocaleData(zh);NgModule({declarations:

[AppComponent,LayoutComponent,HomeComponent,],providers:

provide:

[BrowserModule,FormsModule,AppRouteModule,StoreModule.forRoot({count:counterReducer},

{}),]

}注意这里我们给providers添加了counterAction以便在所有页面都可以注入countActions

回到页面本身

./home.component.html,styleUrls:

export

{count:Observablenumberconstructor(private

action:CountAction){this.countthis.store.pipe(select(count))increasement(){this.store.dispatch(this.action.add())}}这里逻辑的实现和之前一致唯一的区别就是我们countAction直接注到了counstor里然后在具体的执行函数中直接actiions的方法。