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?