Creating an ngrx/store reducer with es6-maps

Question

Seasons Greetings everyone!

I have the following:

static PhoneActions.ADD = '[Phone] ADD';

export const phonesReducer: ActionReducer< Map<number, {}>> = (
    state: Map<number, {}> = new Map<number, {}>(), action?: Action ) => {
  switch ( action.type ) {
    case PhoneActions.ADD:
      return [...action.payload]
};

Currently, I am only returning the the payload without using the current state which I think is incorrect. The payload is the complete map, not an item in the map.

How could I correct this? Or it is fine as is?

Answer 1

A reducer takes two arguments : The current state and an action.

It should return a new state, which is the same type of the current state.

From redux documentation :

The reducer is a pure function that takes the previous state and an action, and returns the next state.
(previousState, action) => newState

Here's your function :

export const phonesReducer: ActionReducer< Map<number, {}>> = (state: Map<number, {}> = new Map<number, {}>(), action: Action ) => { ... }

Your current state is a Map<number, {}>.
You should return a Map<number, {}>.

Instead of that, you return an array containing the action.payload (exploded).

Plus, you should have a default statement returning the current state.

We return the previous state in the default case. It's important to return the previous state for any unknown action.

---

When using a map and the set method, you'll mutate the original object. It'll become quite hard to ensure immutability. If you really want to use a map, I think you should take a look to Immutable.js here