Mobx-State-Tree - Assign to Array Type

mobx-state-tree update array
mobx-state-tree examples
mobx observable array
mobx-state-tree typescript
mobx-state-tree getenv
mobx-state-tree compose
mobx-state-tree types object
mobx-state-tree flow

I have this basic model.

const stuff = types.model({
  term: types.string,
  excludeTerm: types.string,
  stores: types.array(types.string)
}).actions(self => ({
  setTerm(term: string) {
    self.term = term
  },
  setExcludeTerm(term: string) {
    self.excludeTerm = term
  },
  setStores(stores: string[]) {
    self.stores = stores   // <<< the lint error is on this line
  }
}))

I get the following TS Lint error:

Type 'string[]' is not assignable to type 'IMSTArray<ISimpleType<string>> & IStateTreeNode<IArrayType<ISimpleType<string>>>'. Type 'string[]' is missing the following properties from type 'IMSTArray<ISimpleType<string>>': spliceWithArray, observe, intercept, clear, and 4 more.ts(2322)

This is an annoying error. I can fix it by assigning like this: (self as any).stores = stores but I want to stop doing hacks to my code.

The question is why I get this error? Is there another way to assign to an array type in mobx-state-tree?

I couldn't find in mobx-state-tree a more detailed documenation for working with arrays. Does anyone know any?

The solution is to use cast:

import { cast } from "mobx-state-tree"

// .....

self.stores = cast(stores)

This is because MST enables snapshots to be assigned to actual values, and automatically converts them. This doesn't just apply to arrays, but to all types of values. However, typescript doesn't have support for an assignment to be more narrow that the thing it is being assigned to, which is the reason the cast is needed. cast doesn't do anything, but it helps TS to figure out that this assignment is valid

How to Make An Array Type? � Issue #856 � mobxjs/mobx-state-tree , Hi I am having problems with making an array type. I am trying to make a step wizard and I want keep track of the state in Mbox. import { types }� These are the types available in MST. All types can be found in the types namespace, e.g. types.string. Complex types. types.model(properties, actions) Defines a "class like" type with properties and actions to operate on the object. types.array(type) Declares an array of the specified type. types.map(type) Declares a map of the specified type.

You can use self.stores.replace(stores)

Here are the docs for MST, these are really the only docs I have seen out there: https://github.com/mobxjs/mobx-state-tree

There is also a function setLivelinessCheck('error') that helps a lot with debugging locally to see errors that may occur. It is in the list of API Overview functions: https://github.com/mobxjs/mobx-state-tree#api-overview

Types overview � MobX-state-tree, array and types.map are wrapped in types.optional by default, with [] and {} set as their default values, respectively. The types.model type declaration is used to describe the shape of an object. Other built-in types include arrays, maps, primitives, etc. See the types overview. Creating models. egghead.io lesson 1: Describe Your Application Domain Using mobx-state-tree(MST) Models

Array in MST is not a usual array, it's a complex type - IMSTArray<ISimpleType<string>>, so TS lint error that you get is fully expected. In my opinion though, it is definitely not intuitively justified (and frightening for newcomers).

The way you solve it is not a hack, but I'd say the only simple way around it.

Identifiers and references � MobX-state-tree, types.model({ id: types.identifier, title: types.string }) const TodoStore = types. model({ todos: types.array(Todo), selectedTodo: types.reference(Todo) }) // create � Solution with Mobx State Tree: The array should be created as a types.array, actually, this type is an observable array, so all the array’s values are made observable too.

mobx-state-tree, Type validation result, which is an array of type validation errors Casts a node instance type to a reference snapshot type so it can be assigned to a refernence � This tutorial will introduce you to the basics of mobx-state-tree (MST) by building a TODO application. The application will also have the ability to assign each TODO to a user.

Types, models, trees & state � MobX-state-tree, import { types } from "mobx-state-tree" // declaring the shape of a node with the type `Todo` const Todo Other built-in types include arrays, maps, primitives, etc . mobx-state-tree. Opinionated, transactional, MobX powered state container combining the best features of the immutable and mutable world for an optimal DX. Mobx and MST are amazing pieces of software, for me it is the missing brick when you build React based apps. Thanks for the great work! Getting started

Getting Started Tutorial � MobX-state-tree, The application will also have the ability to assign each TODO to a user. mistakes, like putting a string in price field or a boolean where an array is expected. import { types } from "mobx-state-tree" const Todo = types.model({ name: "", done:� Error: [mobx-state-tree] expected a mobx-state-tree type as first argument, got function array #717 Closed corysimmons opened this issue Mar 20, 2018 · 8 comments

Comments
  • Thanks. Where can I find the available methods on MST arrays? Are there any docs?
  • I recently had another error where pushing a new value to a volatile array was not triggering react to update so I really think some docs would be useful.
  • I have updated my answer with the docs. For the react updating after a change in the tree, how are you using this with your react components? Are you using a Provider and the mobx-react packages observer?