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.
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
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');