Ionic 3 ngrx/store reducers not receiving dispatched actions only in production mode

Question

I have an Ionic 3 App that uses web sockets and redux using ngrx/store. At first all of my code is working fine in development mode. In both browsers and real device.

But when I try to built it in production mode. The action is still dispatched but the reducers didn't receive the action that has been dispatched causing that the state of the application not being updated.

Here is my code below of my reducers.

import { Action } from '@ngrx/store';

const UPDATE_AVATAR = '[Websokcet] New ORDER';
type Type = UpdateAvatar

export class UpdateAvatar implements Action {
  readonly type = UPDATE_AVATAR;
  constructor(public payload: any) { }
}

export function UpdateAvatarReducer(state: any, action: Type) {
  console.log('ACTION RECEIVED:', state, action)
  switch (action.type) {
    case UPDATE_AVATAR:
      return action.payload;
  }
}

and in my rootReducers

import { UpdateAvatar, UpdateAvatarReducer } from './reducers/uploadAvatar';

export function rootReducer () {
  return {
    reducers: {
      driverUpdateProfile: DriverUpdateProfileReducer,
    },
  }
}

and in my app.module.ts

import { rootReducer } from '../store/websocket';

// and in the **imports arrays**

StoreModule.forRoot({
  ...rootReducer().reducers
}),

It works in development mode but it doesn't in production. Why?

Appreciate if someone could help. Thanks in advance.

Answer 1

I manage to solve the problem by changing the way of how I implemented my rootReducer and rootActions. Instead of exporting a function I returned declared 2 seperated objects.

Here is my old code below of my rootReducer and actions

export default function () {
  return {
    reducers: {
      newLocation: NewLocationReducer,
      newOrder: NewOrderReducer,
      orderTaken: OrderTakenReducer,
      driverUpdateProfile: DriverUpdateProfileReducer,
      driverUpdateAvatar: UpdateAvatarReducer,
      newTransaction: NewTransactionReducer,
      updateTransaction: UpdateTransactionReducer,
      orderNewMessage: OrderNewMessageReducer,
    },
    actions: {
      newLocation: NewLocation,
      newOrder: NewOrder,
      orderTaken: OrderTaken,
      driverUpdateProfile: DriverUpdateProfile,
      driverUpdateAvatar: UpdateAvatar,
      newTransaction: NewTransaction,
      updateTransaction: UpdateTransaction,
      orderNewMessage: OrderNewMessage,
    }
  }
}

and this is the new code below:

export const rootActions = {
  newLocation: NewLocation,
  newOrder: NewOrder,
  orderTaken: OrderTaken,
  driverUpdateProfile: DriverUpdateProfile,
  driverUpdateAvatar: UpdateAvatar,
  newTransaction: NewTransaction,
  updateTransaction: UpdateTransaction,
  orderNewMessage: OrderNewMessage,
}

export const rootReducer = {
  newLocation: NewLocationReducer,
  newOrder: NewOrderReducer,
  orderTaken: OrderTakenReducer,
  driverUpdateProfile: DriverUpdateProfileReducer,
  driverUpdateAvatar: UpdateAvatarReducer,
  newTransaction: NewTransactionReducer,
  updateTransaction: UpdateTransactionReducer,
  orderNewMessage: OrderNewMessageReducer,
}

I declared them into two seperated variables which I think it is more organized instead of the old one.