RFC: Provide an easy way to reset the Signal Store to it's initial state

[abelokon0711]

Which @ngrx/* package(s) are relevant/related to the feature request?

Signal Store

Information

In one of our stores, we significantly expand the state using custom features. Currently, to reset the state completely, we must manually list all existing state properties along with their initial values in the consuming store. This approach feels cumbersome and counterintuitive. It would be helpful to have a simple method that resets the state to its initial values.

I've tried to address this by creating a custom feature that adds an object to the state with all the initial values, which we use to patch the state for a reset. However, I am uncertain if there's a better way to access the store within a custom feature, as the current implementation is a somewhat dirty workaround.

import {
  patchState,
  SignalStoreFeature,
  SignalStoreFeatureResult,
  withState,
} from '@ngrx/signals';

export function withInitialState<State extends object>(
  initialState: object,
): SignalStoreFeature<
  SignalStoreFeatureResult,
  { state: State & { initialState: State }; computed: {}; methods: {} }
> {
  return (store: any): any => {
    if (store.stateSignals.initialState) {
      return {
        ...store,
        ...withState({ ...initialState, initialState })(store),
      };
    } else {
      patchState(store, {
        initialState: {
          ...store.stateSignals.initialState,
          ...initialState,
        },
      });
      return {
        ...store,
        ...withState(initialState)(store),
      };
    }
  };
}

I would be willing to submit a PR to fix this issue

• Yes
• No

[rainerhahnekamp]

You can use a custom feature for that as well:

function withReset() {
  return signalStoreFeature(
    withState({ _resetState: {} }),
    withMethods((store) => ({
      resetState() {
        const initialState = store._resetState();
        console.log(initialState);
        patchState(store, { ...initialState });
      },
    })),
    withHooks((store) => ({
      onInit() {
        const { _resetState, ...state } = getState(store);
        patchState(store, { _resetState: structuredClone(state) });
      },
    }))
  );
}

Full example here:
https://stackblitz.com/edit/github-webyym?file=src%2Fquiz.store.ts

Let me now, how it works.

[abelokon0711]

Thank you for this beautiful solution @rainerhahnekamp, this works perfectly!

[rainerhahnekamp]

Happy to hear 👍