AngularNgrxStoreEffect和Action的交互过程

我们可以使用MetaReducer的概念，它是一个高级的Reducer。这里有一个典型的例子：LoggerMetaReducer。这个高级Reducer在实际reducer执行之前添加了一些日志消息：（'状态'，状态）；console.log('动作',动作);返回减速器（状态，动作）；};}logger的输入是一个reducer，返回一个与输入reducer签名完全相同的新reducer，在这个新reducer中，会先进行logging操作。这有点像Java中的面向切片编程（AOP）。所示的logger()meta-reducer函数采用ActionReducer类型的输入参数（即纯函数或reducer），并返回ActionReducer类型的函数。返回的函数在返回包装的reducer之前将状态和操作变量记录到控制台。回到AppModule代码中，定义一组ModuleWithProviders类来包装StoreDevtoolsModule.instrument()方法，以便以后可以在AppModule中导入它。exportconststoreDevTools:ModuleWithProviders[]=!environment.production?[StoreDevtoolsModule.instrument()]:[];最后将上面的ModuleWithProviders导入到AppModule中：StoreModule.forRoot((reducers)asany,{metaReducers}),EffectsModule.forRoot(effects),storeDevTools，其实StoreModule.forRoot()方法也可以接收第二个参数，类型为StoreConfig接口：exportdeclaretypeStoreConfig={initialState?:InitialState;reducerFactory?:ActionReducerFactory;metaReducers?:MetaReducer[];StoreSide-Effect将Action分派给Store的代码有时会产生一些副作用（SideEffect）。例如，分派一个动作以将所有英雄数据加载到应用程序中。这样做会导致必须通过Angular服务与托管在服务器端（或云端）的WebAPI进行通信以返回英雄数据的副作用。这种将操作分派到Store的代码的副作用会导致与外部服务的通信。Ngrx/effects模块将副作用与容器组件隔离开来，并为在支持NgRXStore的Angular应用程序中处理它们提供了一个简洁的解决方案。Ngrx/store模块向Store发送一个操作，传递从服务器检索到的任何结果或数据。上图中的交互场景简述如下：ngrx/effects模块监听分发到Store的action。如果Effect被挂钩以侦听调度的动作，Effect将运行并执行。一旦Effect从服务器端接收到数据，它就会向Store发送一个新的操作，以便reducer启动并处理从Effect接收到的数据并相应地更新状态。