在Angular中使用Redux和实体将数据检索到状态的解决方法如下:
@ngrx/store
和@ngrx/entity
库,可以使用以下命令进行安装:npm install @ngrx/store @ngrx/entity
User
的用户实体:export interface User {
id: number;
name: string;
email: string;
}
UserState
的用户状态模型:import { EntityState } from '@ngrx/entity';
import { User } from './user.model';
export interface UserState extends EntityState {
loading: boolean;
error: string | null;
}
createEntityAdapter
创建一个实体适配器,用于管理用户实体的状态。在存储器中定义一些操作,例如加载用户、添加用户等。例如,创建一个名为UserStore
的用户存储器:import { createEntityAdapter, EntityState } from '@ngrx/entity';
import { createReducer, on } from '@ngrx/store';
import { User } from './user.model';
import * as UserActions from './user.actions';
export const userAdapter = createEntityAdapter();
export interface UserState extends EntityState {
loading: boolean;
error: string | null;
}
export const initialState: UserState = userAdapter.getInitialState({
loading: false,
error: null,
});
export const userReducer = createReducer(
initialState,
on(UserActions.loadUsers, (state) => ({
...state,
loading: true,
error: null,
})),
on(UserActions.loadUsersSuccess, (state, { users }) =>
userAdapter.setAll(users, { ...state, loading: false })
),
on(UserActions.loadUsersFailure, (state, { error }) => ({
...state,
loading: false,
error,
})),
// Add other action handlers here...
);
export function reducer(state: UserState | undefined, action: Action) {
return userReducer(state, action);
}
AppModule
中导入StoreModule
和StoreDevtoolsModule
,并在imports
数组中配置存储器和开发工具。例如:import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { reducer } from './user.reducer';
@NgModule({
imports: [
StoreModule.forRoot({ users: reducer }),
StoreDevtoolsModule.instrument(),
// Other module imports...
],
})
export class AppModule {}
Store
和相关的操作,例如加载用户、添加用户等。在组件中使用select
操作符从存储器中选择用户状态,然后使用subscribe
方法订阅状态的变化。例如:import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { User } from './user.model';
import * as UserActions from './user.actions';
@Component({
selector: 'app-user-list',
template: `
- {{ user.name }}
`,
})
export class UserListComponent implements OnInit {
users$: Observable;
constructor(private store: Store<{ users: User[] }>) {}
ngOnInit() {
this.users$ = this.store.select((state) => state.users.entities);
}
loadUsers() {
this.store.dispatch(UserActions.loadUsers());
}
}
这样,当点击"Load Users"按钮时,将从服务器加载用户数据,并将其存储在用户状态中。组件将订阅用户状态的变化,并在列表中显示用户名称。