Setting up the reducer

in the reducer file app.reducer.ts

We first define the feature slice state interface

interface AppState extends State {
  products: IProduct[];
  product: IProduct;
  error: string;
}

We define our initial state

const initialState: AppState = {
  products: [],
  product: {
    name: '',
    price: 0,
  },
  error: '',
};

We create our selectors

const appFeatureSelector = createFeatureSelector<AppState>('app');

export const productSelector = createSelector(
  appFeatureSelector,
  (state) => state.product
);

export const productsSelector = createSelector(
  appFeatureSelector,
  (state) => state.products
);

export const errorSelector = createSelector(
  appFeatureSelector,
  (state) => state.error
);

We create our reducer

export const appReducer = createReducer(initialState)