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?
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.