在Angular中,可以使用NGRX进行状态管理,并且可以使用多个存储来管理不同的模块或部分应用程序的状态。下面是一个解决方案的示例代码。
首先,安装必要的依赖项:
npm install @ngrx/store
npm install @ngrx/effects
npm install @ngrx/entity
然后,创建每个模块或部分应用程序的存储。
例如,假设我们有一个用户模块和一个订单模块,我们可以创建以下存储:
// user.actions.ts
import { createAction } from '@ngrx/store';
export const setUser = createAction('[User] Set User');
// user.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { setUser } from './user.actions';
export interface UserState {
user: any;
}
export const initialState: UserState = {
user: null,
};
export const userReducer = createReducer(
initialState,
on(setUser, (state, { user }) => ({ ...state, user }))
);
// user.selectors.ts
import { createSelector } from '@ngrx/store';
import { UserState } from './user.reducer';
export const selectUserState = (state: any) => state.user;
export const selectUser = createSelector(
selectUserState,
(state: UserState) => state.user
);
// order.actions.ts
import { createAction } from '@ngrx/store';
export const setOrder = createAction('[Order] Set Order');
// order.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { setOrder } from './order.actions';
export interface OrderState {
order: any;
}
export const initialState: OrderState = {
order: null,
};
export const orderReducer = createReducer(
initialState,
on(setOrder, (state, { order }) => ({ ...state, order }))
);
// order.selectors.ts
import { createSelector } from '@ngrx/store';
import { OrderState } from './order.reducer';
export const selectOrderState = (state: any) => state.order;
export const selectOrder = createSelector(
selectOrderState,
(state: OrderState) => state.order
);
接下来,将存储添加到应用程序的根存储中。
// app.module.ts
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { userReducer } from './user/user.reducer';
import { orderReducer } from './order/order.reducer';
@NgModule({
imports: [
StoreModule.forRoot({
user: userReducer,
order: orderReducer,
}),
EffectsModule.forRoot([]),
// ...
],
// ...
})
export class AppModule {}
最后,您可以在组件中使用这些存储。
// user.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { setUser } from './user.actions';
import { selectUser } from './user.selectors';
@Component({
selector: 'app-user',
template: `
User: {{ user$ | async }}
`,
})
export class UserComponent implements OnInit {
user$ = this.store.select(selectUser);
constructor(private store: Store) {}
ngOnInit() {}
setUser() {
this.store.dispatch(setUser({ user: 'John Doe' }));
}
}
// order.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { setOrder } from './order.actions';
import { selectOrder } from './order.selectors';
@Component({
selector: 'app-order',
template: `
Order: {{ order$ | async }}
`,
})
export class OrderComponent implements OnInit {
order$ = this.store.select(selectOrder);
constructor(private store: Store) {}
ngOnInit() {}
setOrder() {
this.store.dispatch(setOrder({ order: '123' }));
}
}
以上是一个基本的示例,展示了如何在Angular中使用NGRX的多个存储来管理不同部分的状态。您可以根据实际需求进行调整和扩展。