Setting the initial state for your ngrx store application is a crucial step in ensuring the

Question

Setting the initial state for your ngrx store application is a crucial step in ensuring the

I'm completely new to ngrx and I'm currently exploring how to handle state management with it. In my application, each staff member (agent) is associated with a group of customers. I'm struggling to define the initial state for each agent object.

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;
    };
  };
}

It's important that each agent object has an initial state set up.

For example:

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 a representation of what the store should look like if everything goes smoothly.

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 aim to achieve is to successfully establish the initial state for each subsequent object added to the store.

javascript angular typescript ngrx ngrx-store

Answer 1

Answer №1

Utilizing the Store Module is recommended in this scenario.

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

For more information, consult the official guide-

We also suggest reviewing this gist - https://github.com/ngrx/platform/issues/662

Answer 2

Utilizing the Store Module is recommended in this scenario.

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

For more information, consult the official guide-

We also suggest reviewing this gist - https://github.com/ngrx/platform/issues/662

Answer 3

Answer №2

To ensure proper typing, be sure to define the entity type and set the initial state for your reducer.

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

export interface CustomState {
   agent: Entity[] // Define the entity type as Entity[]
}

// Initialize the state with your defined interface
const initialState: CustomState = {
    agent: [
     // Assign each object with 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');

Answer 4

To ensure proper typing, be sure to define the entity type and set the initial state for your reducer.

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

export interface CustomState {
   agent: Entity[] // Define the entity type as Entity[]
}

// Initialize the state with your defined interface
const initialState: CustomState = {
    agent: [
     // Assign each object with 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');

Setting the initial state for your ngrx store application is a crucial step in ensuring the

Answer №1

Answer №2

Similar questions

Display the data received from the client on the NodeJS server

Best practice in Angular 2: The difference between binding an object as a whole versus binding its individual

Tips for updating content (wishlist) without the need to refresh the page

My current objective is to extract the information from a specific item within a combobox by implementing the following code

Tips for eliminating white frames or borders on the Mapbox canvas map

Strive to discover the ideal solution for capturing a screenshot of an OpenLayers map using html2canvas. Currently, the map elements are losing their CSS classes and images are not

Rotate images with animation using Javascript

Unable to locate the internal/fs module, current solutions are proving ineffective

Issues with triggering the success block in AngularJS and Node.js Express when using $http.get

Is there a way to generate a button that displays the subsequent 5 outcomes from the database without navigating away from the current

customize your selections in p-multiselect with dynamic choices primeng angular 2

"An error occurred: Attempting to access properties of an undefined object (specifically 'foundTicket'). While the getTickets() function, which fetches data from MongoDB using Mongoose, is working fine, the getTicketById()

Creating your own custom operator using observables is a powerful way

Ways to verify an NPM package for non-JavaScript code

Exploring the Contrast between Using @import for Styles and js Import for Webpack Configuration

Is there a way to retrieve the value of an HTML variable using Selenium?

Using Vuex and array.findIndex but unable to locate a matching element

Guide on redirecting to a specific tab data target in Symfony 5

What is the best way to prevent the body from scrolling when scrolling on a fixed div without making the body's scroll bar disappear?

Traversing through each element using Array method