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

Continue reading...