Platform: ERROR TypeError: Cannot read property 'id' of undefined

[mappedinn]

Minimal reproduction of the bug/regression with instructions:

Have a look on the repo https://github.com/mappedinn/ng-ngrx-entity-pizza-firebase-effects:

• install the npm packages npm i
• open this link http://localhost:4200/pizza
• check the console

Expected behavior:

This is how my reducer is defined:

export function reducer(state = initialState, action: PizzaActions): PizzaState {
  switch (action.type) {

    case PizzaActionTypes.PIZZA_ADDED:
      // if there is one pizza added in the backend, so the store has to be added
      console.log('action=');
      console.log(JSON.stringify(action));
      console.log('action.payload=');
      console.log(JSON.stringify(action.paylaod));
      console.log(JSON.stringify(action['paylaod']));
      // return pizzaAdaptor.addOne({id: '003', size: 'medium', status: 'cooking'}, state);
      return pizzaAdaptor.addOne(action.paylaod, state);

    case PizzaActionTypes.PIZZA_MODIFED:
      // if there is one pizza being modified in the backend, so the store has to modify it
      return pizzaAdaptor.updateOne({
        id: action.paylaod.id,
        changes: action.paylaod
      }, state);

    case PizzaActionTypes.PIZZA_REMOVED:
      // if there is one pizza being removed in the backend, so the store has to remove it
      return pizzaAdaptor.removeOne(action.paylaod.id, state);

    default:
      return state;
  }
}

I am getting the error below for the pizza reducer:

core.js:1624 ERROR TypeError: Cannot read property 'id' of undefined
at selectId (http://localhost:4200/app-modules-pizza-pizza-module.js:424:94)
at addOneMutably (http://localhost:4200/app-modules-pizza-pizza-module.js:124:19)
at Object.operation [as addOne] (http://localhost:4200/app-modules-pizza-pizza-module.js:101:25)
at reducer (http://localhost:4200/app-modules-pizza-pizza-module.js:873:33)
at http://localhost:4200/vendor.js:77764:20
at combination (http://localhost:4200/vendor.js:77722:35)
at computeNextEntry (http://localhost:4200/vendor.js:77058:21)
at recomputeStates (http://localhost:4200/vendor.js:77089:15)
at http://localhost:4200/vendor.js:77316:30
at ScanSubscriber.StoreDevtools.liftedAction$.pipe.Object.state [as accumulator] (http://localhost:4200/vendor.js:77381:38)

This made me think the action is probably undefined. A console.log(JSON.stringify(action)) check show this:

action=
{"type":"[Pizza] added","payload":{"id":"001","size":"big","status":"cooking"}}

Since the reducer is adding a new entity to the store through pizzaAdaptor.addOne(action.paylaod, state);, I checked also action.payload through console.log(JSON.stringify(action.paylaod)); and console.log(JSON.stringify(action['paylaod']));. The result is as follows:

action.payload=
undefined
action['payload']=
undefined

The action object in the reducer is behaving strangely.

PS: The error disappear if I set manually the action.payload object as follows return pizzaAdaptor.addOne({id: '003', size: 'medium', status: 'cooking'}, state);

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

$ npm -v
6.1.0
$ node -v
v8.11.2
$ uname -a
# Linux X580VD 4.15.0-24-generic #26-Ubuntu SMP Wed Jun 13 08:44:47 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

$ npm ls --depth 0
[email protected] /home/amine/docker-projects/ng-ngrx-entity-pizza-firebase-effects
├── @angular-devkit/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Other information:

The obtained error is similar to https://github.com/ngrx/platform/issues/645#issuecomment-351787150

The tutorial I used for building the pizza reducer is https://www.youtube.com/watch?v=rv37jBygQ2g&list=PL0vfts4VzfNjrI4e_cJmqfSrUvaBADMlD&index=5

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

[X] Yes (Assistance is provided if you need help submitting a pull request)
[ ] No

[timdeschryver]

In your effects your creating your action with a payload property.
In your reducer your using paylaod.
You can prevent this by using action creators.

[mappedinn]

thank you very much

[dcanning]

In your effects your creating your action with a payload property.
In your reducer your using paylaod.
You can prevent this by using action creators.

link is broken