我从昨天开始一直在尝试将新的NgRX 8添加到我的Angular应用程序中。但是我只停留在一件事上,我不知道问题出在哪里。
我试图为电影制作一个非常简单的示例:
export class Movie {
public id: number;
public name: string;
constructor() {}
}
我的动作是:
export const getAll = createAction('[Movies Page] Load Movies');
export const getAllSuccess = createAction('[Movies Page] Load Movies Success', props<{ payload: Movie[] }>());
export const getAllFail = createAction('[Movies Page] Load Movies Fail', props<{ error: any }>());
我的效果是:
@Injectable()
export class MovieEffects {
constructor(private actions$: Actions) {
}
loadMovies$ = createEffect(() =>
this.actions$.pipe(
ofType(getAll),
switchMap(() =>
of([movies_array]).pipe(
map(result => getAllSuccess({ payload: result })),
catchError(error => of(getAllFail({ error })))
)
)
)
);
}
我已将所有动作案例添加到我的减速器中:
export interface AppState<T> {
list: T[];
isNull: boolean;
count: number;
type: StateType;
}
export const initialState: AppState<Movie> = {
type: StateType.Loading,
isNull: true,
count: 0,
list: new Array<Movie>()
};
const movieRed = createReducer(
initialState,
on(MovieActionTypes.getAll, state => ({
...state,
type: StateType.Loading
})),
on(MovieActionTypes.getAllSuccess, (state: AppState<Movie>, action) => ({
...state,
type: StateType.Loaded,
isNull: action.payload == null,
count: action.payload != null ? action.payload.length : 0,
list: action.payload
})),
on(MovieActionTypes.getAllFail, state => ({
...state,
type: StateType.Error
}))
);
export function movieReducer(state: AppState<Movie> = initialState, action) {
return movieRed(state, action);
}
并且在我的模块中添加了forRoot和reducers forRoot的效果。
一切正常。但是当我尝试使用以下方法读取状态时:
this.movies$ = store.pipe(select('list'));
我的结果始终是不确定的,我在我的DevTool中看到此消息
我不知道问题出在哪里。我尝试了许多解决方案,但没有一个对我有用。有人知道为什么以及如何解决它吗?
我从昨天开始一直在尝试将新的NgRX 8添加到我的Angular应用程序中。但是我只停留在一件事上,我不知道问题出在哪里。我试图为...
我找到了答案。我错过了定义AppState的过程。