feat(redux): add possibility to extract elements to separate files

`createReducer` and `createEffects` an extraction
into separate files.

actions can also be separated, but there is no
need for an own `createActions` function, because
it is a simple object literal.

Author: rainerhahnekamp

apps/demo/src/app/flight-search/flight-store.ts

@@ -11,21 +11,22 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { map, switchMap } from 'rxjs';
 import { Flight } from './flight';
 
+const actions = {
+  public: {
+    loadFlights: payload<{ from: string; to: string }>(),
+    delayFirst: noPayload,
+  },
+  private: {
+    flightsLoaded: payload<{ flights: Flight[] }>(),
+  },
+};
+
 export const FlightStore = signalStore(
   { providedIn: 'root' },
   withDevtools('flights'),
   withState({ flights: [] as Flight[] }),
   withRedux({
-    actions: {
-      public: {
-        loadFlights: payload<{ from: string; to: string }>(),
-        delayFirst: noPayload,
-      },
-      private: {
-        flightsLoaded: payload<{ flights: Flight[] }>(),
-      },
-    },
-
+    actions,
     reducer: (actions, on) => {
       on(actions.flightsLoaded, (state, { flights }) => {
         updateState(state, 'flights loaded', { flights });

docs/docs/with-redux.md

@@ -50,3 +50,60 @@ export const FlightStore = signalStore(
   })
 );
 ```
+
+## Extracting actions, reducer and effects into separate files
+
+`createReducer` and `createEffects` allow you to extract the reducer and effects into separate files.
+
+There is no need for a `createActions` function, because the actions are just an object literal.
+
+Example:
+
+```typescript
+interface FlightState {
+  flights: Flight[];
+  effect1: boolean;
+  effect2: boolean;
+}
+
+const initialState: FlightState = {
+  flights: [],
+  effect1: false,
+  effect2: false,
+};
+
+// this can be in a separate file
+const actions = {
+  init: noPayload,
+  updateEffect1: payload<{ value: boolean }>(),
+  updateEffect2: payload<{ value: boolean }>(),
+};
+
+// this can be in a separate file
+const reducer = createReducer<FlightState, typeof actions>((actions, on) => {
+  on(actions.updateEffect1, (state, { value }) => {
+    patchState(state, { effect1: value });
+  });
+
+  on(actions.updateEffect2, (state, { value }) => {
+    patchState(state, { effect2: value });
+  });
+});
+
+// this can be in a separate file
+const effects = createEffects(actions, (actions, create) => {
+  return {
+    init1$: create(actions.init).pipe(map(() => actions.updateEffect1({ value: true }))),
+    init2$: create(actions.init).pipe(map(() => actions.updateEffect2({ value: true }))),
+  };
+});
+
+signalStore(
+  withState(initialState),
+  withRedux({
+    actions,
+    effects,
+    reducer,
+  })
+);
+```

libs/ngrx-toolkit/src/index.ts

@@ -6,7 +6,13 @@ export { withGlitchTracking } from './lib/devtools/features/with-glitch-tracking
 export { patchState, updateState } from './lib/devtools/update-state';
 export { renameDevtoolsName } from './lib/devtools/rename-devtools-name';
 
-export { withRedux, payload, noPayload } from './lib/with-redux';
+export {
+  withRedux,
+  payload,
+  noPayload,
+  createReducer,
+  createEffects,
+} from './lib/with-redux';
 
 export * from './lib/with-call-state';
 export * from './lib/with-undo-redo';

libs/ngrx-toolkit/src/lib/with-redux.spec.ts

@@ -6,7 +6,13 @@ import {
   provideHttpClient,
 } from '@angular/common/http';
 import { map, switchMap } from 'rxjs';
-import { noPayload, payload, withRedux } from './with-redux';
+import {
+  createEffects,
+  createReducer,
+  noPayload,
+  payload,
+  withRedux,
+} from './with-redux';
 import { TestBed } from '@angular/core/testing';
 import {
   HttpTestingController,
@@ -161,4 +167,65 @@ describe('with redux', () => {
     expect(flightStore.effect1()).toBe(true);
     expect(flightStore.effect2()).toBe(true);
   });
+
+  it('should be possible to separate actions, reducer and effects', () => {
+    interface FlightState {
+      flights: Flight[];
+      effect1: boolean;
+      effect2: boolean;
+    }
+
+    const initialState: FlightState = {
+      flights: [],
+      effect1: false,
+      effect2: false,
+    };
+
+    const actions = {
+      init: noPayload,
+      updateEffect1: payload<{ value: boolean }>(),
+      updateEffect2: payload<{ value: boolean }>(),
+    };
+
+    const effects = createEffects(actions, (actions, create) => {
+      return {
+        init1$: create(actions.init).pipe(
+          map(() => actions.updateEffect1({ value: true }))
+        ),
+        init2$: create(actions.init).pipe(
+          map(() => actions.updateEffect2({ value: true }))
+        ),
+      };
+    });
+
+    const reducer = createReducer<FlightState, typeof actions>(
+      (actions, on) => {
+        on(actions.updateEffect1, (state, { value }) => {
+          patchState(state, { effect1: value });
+        });
+
+        on(actions.updateEffect2, (state, { value }) => {
+          patchState(state, { effect2: value });
+        });
+      }
+    );
+
+    const FlightsStore = signalStore(
+      withState(initialState),
+      withRedux({
+        actions,
+        effects,
+        reducer,
+      })
+    );
+
+    const flightStore = TestBed.configureTestingModule({
+      providers: [FlightsStore],
+    }).inject(FlightsStore);
+
+    flightStore.init();
+
+    expect(flightStore.effect1()).toBe(true);
+    expect(flightStore.effect2()).toBe(true);
+  });
 });

libs/ngrx-toolkit/src/lib/with-redux.ts

@@ -70,6 +70,60 @@ type ReducerFactory<StateActionFns extends ActionFns, State> = (
   ) => void
 ) => void;
 
+/**
+ * Creates a reducer function to separate the reducer logic into another file.
+ *
+ * ```typescript
+ * interface FlightState {
+ *   flights: Flight[];
+ *   effect1: boolean;
+ *   effect2: boolean;
+ * }
+ *
+ * const initialState: FlightState = {
+ *   flights: [],
+ *   effect1: false,
+ *   effect2: false,
+ * };
+ *
+ * const actions = {
+ *   init: noPayload,
+ *   updateEffect1: payload<{ value: boolean }>(),
+ *   updateEffect2: payload<{ value: boolean }>(),
+ * };
+ *
+ * const reducer = createReducer<FlightState, typeof actions>((actions, on) => {
+ *   on(actions.updateEffect1, (state, { value }) => {
+ *     patchState(state, { effect1: value });
+ *   });
+ *
+ *   on(actions.updateEffect2, (state, { value }) => {
+ *     patchState(state, { effect2: value });
+ *   });
+ * });
+ *
+ * signalStore(
+ *   withState(initialState),
+ *   withRedux({
+ *     actions,
+ *     reducer,
+ *   })
+ * );
+ * ```
+ * @param reducerFactory
+ */
+export function createReducer<
+  State extends object,
+  Actions extends ActionsFnSpecs
+>(
+  reducerFactory: ReducerFactory<
+    ActionFnsCreator<Actions>,
+    WritableStateSource<State>
+  >
+) {
+  return reducerFactory;
+}
+
 /** Effect **/
 
 type EffectsFactory<StateActionFns extends ActionFns> = (
@@ -79,6 +133,57 @@ type EffectsFactory<StateActionFns extends ActionFns> = (
   ) => Observable<ActionFnPayload<EffectAction>>
 ) => Record<string, Observable<unknown>>;
 
+/**
+ * Creates the effects function to separate the effects logic into another file.
+ *
+ * ```typescript
+ * interface FlightState {
+ *   flights: Flight[];
+ *   effect1: boolean;
+ *   effect2: boolean;
+ * }
+ *
+ * const initialState: FlightState = {
+ *   flights: [],
+ *   effect1: false,
+ *   effect2: false,
+ * };
+ *
+ * const actions = {
+ *   init: noPayload,
+ *   updateEffect1: payload<{ value: boolean }>(),
+ *   updateEffect2: payload<{ value: boolean }>(),
+ * };
+ *
+ * const effects = createEffects(actions, (actions, create) => {
+ *   return {
+ *     init1$: create(actions.init).pipe(
+ *       map(() => actions.updateEffect1({ value: true }))
+ *     ),
+ *     init2$: create(actions.init).pipe(
+ *       map(() => actions.updateEffect2({ value: true }))
+ *     ),
+ *   };
+ * });
+ *
+ * signalStore(
+ *   withState(initialState),
+ *   withRedux({
+ *     actions,
+ *     effects,
+ *   })
+ * );
+ * ```
+ * @param actions
+ * @param effectsFactory
+ */
+export function createEffects<Actions extends ActionsFnSpecs>(
+  actions: Actions,
+  effectsFactory: EffectsFactory<ActionFnsCreator<Actions>>
+) {
+  return effectsFactory;
+}
+
 // internal types
 
 /**