CODEWITHSUNDEEP
angularngrxngrx-signal-store
Saif Islam
Saif Islam

Reputation: 301

action, reducer, effects in different files for ngrx-toolkit and signalStore

I would like to divide the below code into 3 separate files? So, actions will go to actions.ts, reducer methods will go to reducer.ts and effects methods will go to effects.ts. Can someone please help and de-structure the below code so that reducer and effect goes to their own files and then import here. Just like previous NGRX Redux pattern. Thanks in advance.

import { signalStore, withState } from '@ngrx/signals';
import {
 noPayload,
 payload,
 withDevtools,
 withRedux,
 updateState,
} from '@angular-architects/ngrx-toolkit';
import { inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { map, switchMap } from 'rxjs';
import { Flight } from './flight';

export const FlightStore = signalStore(
 { providedIn: 'root' },
 withDevtools('flights'),
 withState({ flights: [] as Flight[] }),
 withRedux({
actions: flightActions,
reducer: (actions, on) => {
  on(actions.flightsLoaded, (state, { flights }) => {
    updateState(state, 'flights loaded', { flights });
  });
},

effects: (actions, create) => {
  const httpClient = inject(HttpClient);

  return {
    loadFlights$: create(actions.loadFlights).pipe(
      switchMap(({ from, to }) => {
        return httpClient.get<Flight[]>(
          'https://demo.angulararchitects.io/api/flight',
          {
            params: new HttpParams().set('from', from).set('to', to),
          }
        );
      }),
      map((flights) => actions.flightsLoaded({ flights }))
    ),
  };
},
}));

PS: I successfully separated the actions in my actions.ts file like below

actions.ts

export const flightActions = {
  public: {
    load: payload<{ from: string; to: string }>(),
  },
  private: {
    loaded: payload<{ flights: Flight[] }>(),
  },
}

How do I achieve the same for reducers and effects, please help, thanks :)

Link to same issue for the related library

Upvotes: 1

Views: 55

Answers (1)

Saif Islam
Saif Islam

Reputation: 301

The super kind collaborator of the library has released version v19.0.2 which has the solution where you can ensure separation of concern for actions, reducers and effects. Also look at the documentation here for detail information. You need Angular 19 as the dependancy.

Upvotes: 0

Related Questions