How to rehydrate my store using createRehydrateReducer() from package ngrx-rehydrate

Question

I use @ngrx/store. Here is my code:

.action.ts

import { createAction, props } from "@ngrx/store";

export const addPhotoToFavs = createAction("Add photo to Favorites", props<{photoID:number}>());
export const removePhotoFromFavs = createAction("Remove photo from Favorites", props<{photoID:number}>());

.reducer.ts

import { createReducer, on } from "@ngrx/store";
import { addPhotoToFavs, removePhotoFromFavs } from "./favoritePhotos.actions";
import { favoritePhotoState } from "./favoritePhotos.model";

const initialState: favoritePhotoState = {
  favoritePhotoList: [],
};

export const favoritePhotosListReducer = createReducer(
  initialState,
  on(addPhotoToFavs, (state, action) =>
    ({ favoritePhotoList: [...state.favoritePhotoList, action.photoID] })
  ),
);

Now I want to use ngrx-rehydrate package from here so to be able to save and restore my data to/from localstorage.

According to Usage and Refs link to this example, supposed that just by changing the createReducer to createRehydrateReducer and adding the {key : "what-ever-key-name"} the reducer will work...

"new" .reducer.ts

import { createReducer, on } from "@ngrx/store";
import { addPhotoToFavs, removePhotoFromFavs } from "./favoritePhotos.actions";
import { favoritePhotoState } from "./favoritePhotos.model";
import { createRehydrateReducer } from "ngrx-rehydrate";

const initialState: favoritePhotoState = {
  favoritePhotoList: [],
};

export const favoritePhotosListReducer = createRehydrateReducer(
  {key : "key1"},
  initialState,
  on(addPhotoToFavs, (state, action) =>
    ({ ...state, favoritePhotoList: [...state.favoritePhotoList, action.photoID] })
  )  
 );

...but instead I get this type-errors:

Argument of type 'ReducerTypes<favoritePhotoState, [ActionCreator<"Add photo to Favorites", (props: { photoID: number; }) => { photoID: number; } & TypedAction<"Add photo to Favorites">>]>' is not assignable to parameter of type 'ReducerTypes<favoritePhotoState, ActionCreator[]>'.

Types of property 'reducer' are incompatible.

Type 'OnReducer<favoritePhotoState, [ActionCreator<"Add photo to Favorites", (props: { photoID: number; }) => { photoID: number; } & TypedAction<"Add photo to Favorites">>], favoritePhotoState, favoritePhotoState>' is not assignable to type 'OnReducer<favoritePhotoState, ActionCreator[]>'.

Types of parameters 'action' and 'action' are incompatible.

Type 'object & { type: string; }' is not assignable to type '{ photoID: number; } & TypedAction<"Add photo to Favorites"> & { type: "Add photo to Favorites"; }'.

Property 'photoID' is missing in type '{ type: string; }' but required in type '{ photoID: number; }'.

Using Angular 17 standalone

What am I missing?

Answer 1

the package has been updated (version 1.0.0), it uses Angular 18 and ngrx 18. your case was added as a test to make sure it works. thanks for using the lib.

ref