title: NGXS state management : change the state when an action is called and save it to DB
body: <p>I have several movies, which one can be updated, deleted and liked through NGXS state management pattern.</p>
  
  <p>I want to update my store to show if a movie is liked or not and save the state in the database.</p>
  
  <p>Update and delete actions work, but the like action does not work, I don't understand why. It can't save in DB. If someone can help me I'm stuck. Below is my code, thanks.</p>
  
  <p>db.json</p>
  
  <pre><code>"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"
  }
  </code></pre>
  
  <p>]</p>
  
  <p>Movie.ts</p>
  
  <pre><code> export interface Movie {
   id: number;
   title: string;
   imageUrl: string;
   liked: boolean;
  }
  </code></pre>
  
  <p>movie.action.ts</p>
  
  <pre><code> 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) {}
      }
  </code></pre>
  
  <p>movie-service.ts</p>
  
  <pre><code> updateMovie(payload: Movie, id: number) {
      return this.httpClient
       .put&lt;Movie&gt;(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&lt;Movie&gt;(encodeURI(this.URL_BASE + `movies`), payload);
     }
  </code></pre>
  
  <p>movie.state.ts</p>
  
  <pre><code>   export class MovieStateModel {
         movies: Movie[];
         selectedMovie: Movie;
         liked: Movie[];
       }
  
     @State&lt;MovieStateModel&gt;({
        name: 'movies',
        defaults: {
        movies: [],
        selectedMovie: null,
        liked: []
      }
    })
  
     @Action(DeleteMovie)
     deleteMovie({ getState, setState }: StateContext&lt;MovieStateModel&gt;, {id}: DeleteMovie) {
      return this.movieService.deleteMovie(id).pipe(tap(() =&gt; {
        const state = getState();
        setState({
          ...state,
          movies: state.movies.filter(item =&gt; item.id !== id)
        });
      }));
     }
  
   @Action(UpdateMovie)
   updateMovie({ getState, setState }: StateContext&lt;MovieStateModel&gt; {payload, id }: UpdateMovie) {
      return this.movieService.updateMovie(payload, id).pipe(tap((result) =&gt;
    {
        const state = getState();
        const movieList = [...state.movies];
        const movieIndex = movieList.findIndex(item =&gt; item.id === id);
        movieList[movieIndex] = result;
        setState({
           ...state,
           movies: movieList
         });
       }));
      }
  
   @Action(LikeMovie)
   LikeMovie({ getState, setState }: StateContext&lt;MovieStateModel&gt;, {payload}: LikeMovie) {
      return this.movieService.likeMovie(payload).pipe(tap(() =&gt; {
        const state = getState();
        setState({
           ...state,
           liked: [...state.liked, payload]
        });
      }));
    }
  </code></pre>
  
  <p>movie-list.component.ts</p>
  
  <pre><code>  likeMovie(payload: Movie) {
    this.store.dispatch(new LikeMovie(payload));
  }
  </code></pre>