Confused on which type(s) to use when how to store a large object with dynamic keys

[andrewdang17]

Coming from redux here and I'm not sure how to store normalized data (or do I even need to?). Say I have a todo list I'd normalize my data so instead of an array of todo objects, I'd change it to the below and store it in redux as such:

state = {
  todoIds: [1,2,3],
  todos: {
    1: { name: '' },
    2: { name: '' },
    3: { name: '' },
  }
}

With MST, it seems like I'd need 2 models, TodoList and Todo. However I'm not sure how I would have this data normalized. Seems like docs suggest keeping the array so I'd have something like this:

const Todo = types.model("Todo", {
   name: types.string
}) 

const TodoList = types.model("TodoList", {
   todos: types.array(Todo)
}) 

But ideally I have it the way I would normalized in redux

[EmilTholin]

Hi @andrewdang17!

Normalization is often nicely handled with the help of references.

import { types } from "mobx-state-tree";

const Todo = types.model({
  id: types.identifierNumber,
  name: types.string
});
const RootStore = types.model({
  todoIds: types.array(types.reference(Todo)),
  todos: types.map(Todo),
  selectedTodo: types.reference(Todo)
});

const rootStore = RootStore.create({
  todoIds: [1, 2, 3],
  todos: {
    1: { id: 1, name: "Foo" },
    2: { id: 2, name: "Bar" },
    3: { id: 3, name: "Baz" }
  },
  selectedTodo: 1
});

// References are evaluated to their corresponding model instance
console.log(rootStore.selectedTodo)
// => {id: 1, name: "Foo"}
console.log(rootStore.todoIds[2])
// => {id: 3, name: "Baz"}

[andrewdang17]

ah .map is what I was missing. Thanks for the quick responses @EmilTholin !

[andrewdang17]

@EmilTholin do you know if there is a way to get the raw array of ids from todoIds? when I call todoList.ids it gives me an array of Todos instead. I could do .map(t => t.id) or store it in a computed value but seems like there should be a way to access it without either of those.

[EmilTholin]

I think todoIds.map(t => t.id) is the way to go if you are using references.

If you don't want todoIds to resolve to the corresponding model instance, you could model it as todoIds: types.array(types.number) instead, but then you won't get any validation, optional automatic removal etc. that references/safeReferences gives you.