Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

414
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda