Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

417
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda