时间戳

首页 > 解决方案 > NGXS 状态管理：在调用动作时更改状态并将其保存到 DB

angular - NGXS 状态管理：在调用动作时更改状态并将其保存到 DB

问题描述

我有几部电影，其中一部可以通过 NGXS 状态管理模式进行更新、删除和点赞。

我想更新我的商店以显示是否喜欢电影并将状态保存在数据库中。

更新和删除操作有效，但类似操作无效，我不明白为什么。它无法保存在数据库中。如果有人可以帮助我，我会被卡住。下面是我的代码，谢谢。

db.json

"movies": [
{
  "id": 1,
  "title": "Avengers Infinity War",
  "imageUrl": "https://fakeimg.pl/600x600/000000/fff",
  "liked": (here I want to change the status to true or false when clicked)

},
{
  "id": 2,
  "title": "Avengers Endgame",
  "imageUrl": "https://fakeimg.pl/600x600/000000/fff"
}

]

电影.ts

 export interface Movie {
 id: number;
 title: string;
 imageUrl: string;
 liked: boolean;
}

电影动作.ts

 export class UpdateMovie {
      static readonly type = '[Movie] UpdateMovie';
      constructor(public payload: Movie, public id: number) {}
    }

 export class DeleteMovie {
     static readonly type = '[Movie] DeleteMovie';
     constructor(public id: number) {}
    }

  export class LikeMovie {
      static readonly type = '[Movie] LikeMovie';
      constructor(public payload: Movie) {}
    }

电影服务.ts

 updateMovie(payload: Movie, id: number) {
    return this.httpClient
     .put<Movie>(encodeURI(this.URL_BASE + `movies/${id}`), payload)
   }

deleteMovie(id: number) {
  return this.httpClient
    .delete(encodeURI(this.URL_BASE + `movies/${id}`))
  }

likeMovie(payload: Movie) {
    return this.httpClient
      .post<Movie>(encodeURI(this.URL_BASE + `movies`), payload);
   }

电影状态.ts

   export class MovieStateModel {
       movies: Movie[];
       selectedMovie: Movie;
       liked: Movie[];
     }

   @State<MovieStateModel>({
      name: 'movies',
      defaults: {
      movies: [],
      selectedMovie: null,
      liked: []
    }
  })

   @Action(DeleteMovie)
   deleteMovie({ getState, setState }: StateContext<MovieStateModel>, {id}: DeleteMovie) {
    return this.movieService.deleteMovie(id).pipe(tap(() => {
      const state = getState();
      setState({
        ...state,
        movies: state.movies.filter(item => item.id !== id)
      });
    }));
   }

 @Action(UpdateMovie)
 updateMovie({ getState, setState }: StateContext<MovieStateModel> {payload, id }: UpdateMovie) {
    return this.movieService.updateMovie(payload, id).pipe(tap((result) =>
  {
      const state = getState();
      const movieList = [...state.movies];
      const movieIndex = movieList.findIndex(item => item.id === id);
      movieList[movieIndex] = result;
      setState({
         ...state,
         movies: movieList
       });
     }));
    }

 @Action(LikeMovie)
 LikeMovie({ getState, setState }: StateContext<MovieStateModel>, {payload}: LikeMovie) {
    return this.movieService.likeMovie(payload).pipe(tap(() => {
      const state = getState();
      setState({
         ...state,
         liked: [...state.liked, payload]
      });
    }));
  }

电影列表.component.ts

  likeMovie(payload: Movie) {
  this.store.dispatch(new LikeMovie(payload));
}

标签： angularreduxstateangular7ngxs

解决方案

欢迎来到 StackOverflow :)

除了服务器错误（克里斯蒂安已经在评论中提到过）之外，似乎在处理LikeMovie操作时还有一个小错误。

如果您的liked属性是，boolean那么您应该确保为其分配了一个布尔值。

setState({
  ...state,
  liked: [...state.liked, payload] <-- assigns an array
});

正确的方法是：

setState({
  ...state,
  liked: payload
});

推荐阅读