Having trouble with setting up a Store with Ngrx in an Angular application

Question

Having trouble with setting up a Store with Ngrx in an Angular application

Could someone assist me in troubleshooting the error by analyzing the code provided below? I am new to Angular and unfamiliar with the Ngrx concept. You can also view a screenshot of the error here: https://i.sstatic.net/yhM0G.png

package.json

{
  "name": "recipe-book",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.1",
    // More dependencies listed...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    // More devDependencies listed...
  }
}

app.reducer.ts

// Code snippet for app reducer...

recipes.action.ts

// Code snippet for recipes actions...

recipes.effects.ts

// Code snippet for recipes effects...

recipes.reducer.ts

// Code snippet for recipes reducer...

The error I encountered in app.reducer.ts is shown below:

// Error message regarding app.reducer.ts...

angular typescript ngrx

Answer 1

Answer №1

Your Reducer function should accept two values and return state. If you have decorated your app with ActionReducerMap<T>, then you should provide ActionReducer<> instead of a normal function.

Solution 1 To resolve this issue, simply remove ActionReducerMap<T> from your appReducer. Keep in mind that NgRx has changed the way to write state, action, effects, selectors, and reducers. The newer method involves using ActionReducerMap. You can read more about it here (Look at the second solution).

Solution 2 Update your NgRx state files by following the new method provided by NgRx:

recipes.actions.ts

import { createAction, props } from '@ngrx/store';
import { Recipe } from '../recipe/recipe.model';

let actionTypes = {
  FETCH_RECIPES : '[Recipes] Fetch Recipes',
  SET_RECIPES : '[Recipes] Set Recipes',
}

export const FetchRecipes = createAction(actionTypes.FETCH_RECIPES);
export const SetRecipes = createAction(actionTypes.SET_RECIPES,props<{recipe:Recipe[]}>());

recipes.effects.ts

//....imports , all the imports will come here
@Injectable()
export class RecipesEffects {
  constructor(private action$: Actions, private http: HttpClient) {}
  fetchRecipt$ = createEffect(() =>
    this.action$.pipe(
      ofType(FetchRecipes),
      mergeMap(action =>
        this.fetchFromUrl().pipe(map(result => SetRecipes({ recipe: result })))
      )
    )
  );

  fetchFromUrl() {
    return this.http.get<Recipe[]>(
      'https://recipebook-a7054-default-rtdb.firebaseio.com/recipes.json'
    );
  }
}

recipe.reducer.ts


import { createReducer, on,Action } from '@ngrx/store';
import * as RecipesActions from './recipes.actions'

export interface State {
  recipes: Recipe[];
}
const initialState: State = {
  recipes: [],
};

const reducer = createReducer(initialState,
  on(RecipesActions.SetRecipes,(state,payload)=>{
    return {...state,recipes:[...payload.recipe]}
  })
  )

  export function RecipesReducer (
    state = initialState,
    action: Action
  ) {
    return reducer(state,action)
  }

Answer 2

Your Reducer function should accept two values and return state. If you have decorated your app with ActionReducerMap<T>, then you should provide ActionReducer<> instead of a normal function.

Solution 1 To resolve this issue, simply remove ActionReducerMap<T> from your appReducer. Keep in mind that NgRx has changed the way to write state, action, effects, selectors, and reducers. The newer method involves using ActionReducerMap. You can read more about it here (Look at the second solution).

Solution 2 Update your NgRx state files by following the new method provided by NgRx:

recipes.actions.ts

import { createAction, props } from '@ngrx/store';
import { Recipe } from '../recipe/recipe.model';

let actionTypes = {
  FETCH_RECIPES : '[Recipes] Fetch Recipes',
  SET_RECIPES : '[Recipes] Set Recipes',
}

export const FetchRecipes = createAction(actionTypes.FETCH_RECIPES);
export const SetRecipes = createAction(actionTypes.SET_RECIPES,props<{recipe:Recipe[]}>());

recipes.effects.ts

//....imports , all the imports will come here
@Injectable()
export class RecipesEffects {
  constructor(private action$: Actions, private http: HttpClient) {}
  fetchRecipt$ = createEffect(() =>
    this.action$.pipe(
      ofType(FetchRecipes),
      mergeMap(action =>
        this.fetchFromUrl().pipe(map(result => SetRecipes({ recipe: result })))
      )
    )
  );

  fetchFromUrl() {
    return this.http.get<Recipe[]>(
      'https://recipebook-a7054-default-rtdb.firebaseio.com/recipes.json'
    );
  }
}

recipe.reducer.ts


import { createReducer, on,Action } from '@ngrx/store';
import * as RecipesActions from './recipes.actions'

export interface State {
  recipes: Recipe[];
}
const initialState: State = {
  recipes: [],
};

const reducer = createReducer(initialState,
  on(RecipesActions.SetRecipes,(state,payload)=>{
    return {...state,recipes:[...payload.recipe]}
  })
  )

  export function RecipesReducer (
    state = initialState,
    action: Action
  ) {
    return reducer(state,action)
  }

Having trouble with setting up a Store with Ngrx in an Angular application

Answer №1

Similar questions

Using a comma as a decimal separator for input is not permitted when working with angular/typescript/html

Accessing data from an object of type Request in NodeJS using Typescript

Is moduleId a reserved word in Angular2 / CLI?

Transform angularjs directive into angular 10

Can you provide guidance on defining functions using standard syntax and incorporating children in React with TypeScript?

Issues with implementing Firebase Phone Authentication in Ionic 3

Obtain map coordinates in Angular 10 using OpenLayers when a click event occurs

Utilizing Vue and TypeScript - Retrieving a Variable Declared in the Data() Method within Another Method

The culprit behind Angular 11 app error: Unidentified router outlet triggering 'No routes match' issue

The error encountered is: "Unable to modify the 'x' property as it is readonly for the '[object Array]' object."

The declaration file for module 'vue-tabulator' was nowhere to be found

Cypress error: Unable to access 'uid' property as it is undefined

Solving CORS policy error in a MEAN stack application deployed on Heroku

Having trouble with the sx selector not functioning properly with the Material UI DateTimePicker component

Define the data type of the array within hooks, then proceed with initialization

Using optional chaining along with the methods toLowerCase and indexOf while iterating through an array using the map

Updates to TypeScript 2.3.1 creating disruptions in SystemJS plunk

Troubleshooting Problem with Uploading Several Photos to Firebase Storage

Encountering a "Multiple registrations of the method 'get' on the path '../api/' error" with Swagger

Connect ngModel value between multiple components