Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

415
Views
Angular NgRx - get keys of a Interface inside the store as an array of strings

I'm not sure where should I put my code inside NgRx store.

So I have a NgRx store with reducer like this (mostly generated automatically with CLI):

import { createReducer, on } from '@ngrx/store';
import { addTodo } from './todo.actions';

export const todosFeatureKey = 'todos';

export interface Todo {
  id: number,
  name: string,
}

export interface TodosState {
  todos: Todo[],
}

export const initialState: TodosState = {
  todos: [],
};

export const todosReducer = createReducer(
  initialState,
  on(addTodo, (state, todo) => ({
    ...state,
    todos: [...state.todos, todo ]
  })),

);

I need to get an array of string representing keys of a Todo interface. Like this:

const keysOfTodo: string[] = ???

console.log(keysOfTodo); // ['id', 'name']

Similar question was asked here: Get keys of a Typescript interface as array of strings

And I followed this answer: https://stackoverflow.com/a/59806829/7214068

And wrote something like this:

class TodoClass {
    id = 0;
    name = "";
}
interface Todo extends TodoClass { };

const keysOfTodo = Object.keys(new TodoClass ()) as (keyof TodoClass )[];

console.log(keysOfTodo); // ['id', 'name']

But my question is - where should I put this code inside NgRx store?


My intuition was that I should put this helper class inside my reducer.ts file alongside the interface. And then I could declare const keysOfTodo on demand wherever I need it.

But then I thought that I probably should make that a reusable function and I immediately thought about NgRx selectors. Yet this (although it works) does not seems quite right.

import { createSelector } from "@ngrx/store";
import { AppState } from "../app.state";
import { Todo, TodoClass, TodosState } from "./todo.reducer";

export const selectTodos = (appState: AppState) => appState.todos;
export const selectAllTodos = createSelector(
    selectTodos,
    (state: TodosState) => state.todos,
);

export const selectTodoKeys = () => Object.keys(new TodoClass()) as (keyof Todo)[];
export const selectAllTodoKeys = createSelector(selectTodoKeys);

Keys of Todo probably isn't something that will change during runtime, so I don't really think that it should be reactive. But other than selectors I don't know where should I put such function. Maybe I should create separate file for storing only types? Or just export it straight inside a reducer file? What do you think? What is typical NgRx approach?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!