How to set initial state for ngrx store application

Question

I am new to ngrx and am trying to manage my state with it.In my application, every agent(staff) have a group of customers that are tied to him/her. I am trying to set the initial state of each agent objects and i don't know how.

import { createReducer } from "@ngrx/store";
import { Cursor } from "../../../models/cursor";
import { Customer } from "../../../models/customer";

export interface State {
  agent_customer: {
    [agentId: number]: {
      customer: Customer[];
      cursors: Cursor;
      total: number;
      loading: boolean;
      errorMessage: string;
      items_per_page: number;
      pageSizeOptions: number[];
      pageIndex: number;
      searchKey: string;
    };
  };
}

Each agent object should have some initial state.

something like this

export const initialState: State = {
  agent_customer: {
    1: {
      customer: [],
      cursors: {
        after: "",
        before: "",
        hasNext: false,
        hasPrevious: false,
      },
      total: 0,
      loading: false,
      errorMessage: null,
      items_per_page: 2,
      pageSizeOptions: [2, 3, 5, 10, 15],
      pageIndex: 0,
      searchKey: "",
    },
  },
};

Edit: This is an example of what should be in the store if all goes well.

agent_customer: {
    198282: {
      customer: [],
      cursors: {
        after: "",
        before: "",
        hasNext: false,
        hasPrevious: false,
      },
      total: 0,
      loading: false,
      errorMessage: null,
      items_per_page: 2,
      pageSizeOptions: [2, 3, 5, 10, 15],
      pageIndex: 0,
      searchKey: "",
    },
    165436: {
      customer: [],
      cursors: {
        after: "",
        before: "",
        hasNext: false,
        hasPrevious: false,
      },
      total: 0,
      loading: false,
      errorMessage: null,
      items_per_page: 2,
      pageSizeOptions: [2, 3, 5, 10, 15],
      pageIndex: 0,
      searchKey: "",
    },
    981342: {
      customer: [],
      cursors: {
        after: "",
        before: "",
        hasNext: false,
        hasPrevious: false,
      },
      total: 0,
      loading: false,
      errorMessage: null,
      items_per_page: 2,
      pageSizeOptions: [2, 3, 5, 10, 15],
      pageIndex: 0,
      searchKey: "",
    },
  },

What i want is to be able to set the initial state of each subsequent object i add to the store.

Answer 1

You should use the Store Module for this-

import {createAction, props} from '@ngrx/store'

Refer to the official guide- https://ngrx.io/guide/store https://ngrx.io/guide/store/reducers

Please check out this gist - https://github.com/ngrx/platform/issues/662

Answer 2

Try to pass the type, then set the initialState of your reducer

import { Action, createFeatureSelector, createReducer, on } from '@ngrx/store';
import { ACTION } from './actions';
import { Entity} from './entity';

export interface CustomState {
   agent: Entity[] // Pass the entity type, on this case Entity[]
}

// type the initial state with your interface(state)
const initialState: CustomState = {
    agent: [
     // Pass here each object of type (Entity)
     {
       total: 0,
       loading: false,
       errorMessage: null,
       items_per_page: 2,
       ...
     }
]
}

const reducer = createReducer(
    initialState,
    on(ACTION, (state, { payload }) => ({ ...state, agent: payload }))
);

export function customReducer(state: CustomState, action: Action) {
    return reducer(state, action)
};

export const getCustomState = createFeatureSelector<CustomState>('customName');