{"id":21244110,"url":"https://github.com/aaronksaunders/mst-todo-ionic2","last_synced_at":"2026-04-11T00:45:19.009Z","repository":{"id":139353028,"uuid":"116091890","full_name":"aaronksaunders/mst-todo-ionic2","owner":"aaronksaunders","description":"a mobx state tree example based on the ionic2 todo app written in angularjs","archived":false,"fork":false,"pushed_at":"2018-04-18T03:46:47.000Z","size":123,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-21T20:11:27.064Z","etag":null,"topics":["angular-mobx","angular2","angular4","ionic","ionic-framework","ionic2","ionic2-examples","ionic3","mobx","mobx-demo","mobx-state-tree","mobxautorun","state-management","state-tree","tutorial-code"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-03T04:37:48.000Z","updated_at":"2018-04-18T03:48:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"4032cb36-ebe4-45f1-a5a3-6318775f72d5","html_url":"https://github.com/aaronksaunders/mst-todo-ionic2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fmst-todo-ionic2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fmst-todo-ionic2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fmst-todo-ionic2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fmst-todo-ionic2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/mst-todo-ionic2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243683154,"owners_count":20330567,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-mobx","angular2","angular4","ionic","ionic-framework","ionic2","ionic2-examples","ionic3","mobx","mobx-demo","mobx-state-tree","mobxautorun","state-management","state-tree","tutorial-code"],"created_at":"2024-11-21T01:16:16.720Z","updated_at":"2025-12-31T00:22:46.402Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Mobx-State-Tree Ionic Framework\n\n### This has been updated to the latest versions of Ionic, mobx and mobx-state-tree as of April 2018\n\n- Based on Ionic Todo Example from here https://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/\n- The Mobx-State-Tree Example from here: https://github.com/mobxjs/mobx-state-tree\n- And finally the mobx-angular example found here: https://github.com/mobxjs/mobx-angular\n- add some unit testing for the store based on template here: https://github.com/roblouie/unit-testing-demo\n\nThe above lists the source materials for the example, I am just pulling it all together here. **There is no overview of the todo app here at all, see the referenced blog post for those materials.** We will be starting with the assumption you have that application functioning on your own\n\n## Installation Requirements for The Mobx State Tree\n\n```console\nnpm install --save mobx-angular mobx mobx-state-tree\nnpm install --save-dev mobx-devtools-mst   // dev tools\n```\nThis next requirement is because the normal npm package has not been updated yet to support the latest version of mobx so we need to use the fork at this time\n```console\nnpm install --save-dev mobx-remotedev@git+ssh://git@github.com/crayonzx/mobx-remotedev.git\n```\n\n## Starting The Mobx State Tree\n\nLook into quokka for testing out state tree before integrating it into the application\n\n- https://quokkajs.com/\n- see file `test-mst-1.ts` for how I tested the store before integrating in application\n- visual studio code plugin for it: https://quokkajs.com/docs/#getting-started\n\nStarting with this code to layout the fields for the Todo object that we are using\n\n```typescript\nimport { types, onSnapshot } from \"mobx-state-tree\"\n\nconst Todo = types.model(\"Todo\", {\n    title: types.string,\n    description: types.string,\n    when : types.string\n}).actions(self =\u003e ({\n\n}))\n\n// create the object\nlet x = Todo.create({})\n```\n\nErrors are generated becuase we are trying to create the object without the required fields\n\n```console\n[mobx-state-tree] Error while converting `{}` to `Todo`:​​\n​​at path \"/title\" value `undefined` is not assignable to type: `string` (Value is not a string).​​\n​​at path \"/description\" value `undefined` is not assignable to type: `string` (Value is not a string).​​\n​​at path \"/when\" value `undefined` is not assignable to type: `string` (Value is not a string).​​\n```\n\n```typescript\nlet x1 = Todo.create({\n    title: \"Aaron\",\n    description: \"Test Description\",\n    when: new Date() + \"\"\n})\n\nconsole.log(getSnapshot(x1))\n```\n\nwill get the correct output\n\n```javascript\n{\n  title: 'Aaron',​​​​​\n  description: 'Test Description',​​​​​\n  when: 'Tue Jan 02 2018 22:20:02 GMT-0500 (EST)'\n}​​​​​\n```\n\nBut we need something to actually hold the Todo Items so we will create a store to hold them\n\n```javascript\nconst TodoStore = types.model(\"TodoStore\", {\n    todos : types.array(Todo)\n}).actions(self =\u003e ({\n\n}))\n\n// will generate the same error..\nlet theStore = TodoStore.create({})\n```\n\nlets intoduce `types.maybe`\n\n```javascript\nconst TodoStore = types.model(\"TodoStore\", {\n    todos : types.maybe(types.array(Todo))\n}).actions(self =\u003e ({\n\n}))\n\n// will generate the same error.. without the maybe\nlet theStore = TodoStore.create({})\n```\n\n we can fix the problem using the `types.optional` with a default value for the array which you can see in the code.\n ```javascript\n  // will throw error when creating the object\n todos : types.maybe(types.array(Todo)) \n \n // will default to an empty array when creating the object\n todos : types.optional(types.array(Todo),[]) \n ```\n\nWe will add the first function to add items to the `todoStore` that was created; notice the type of the `Todo` object to ensure that we get the type checking when attempting to create the object\n ```javascript\n const TodoStore = types.model(\"TodoStore\", {\n    todos : types.optional(types.array(Todo),[])\n}).actions(self =\u003e ({\n    addItem(_value) {\n        self.todos.push(Todo.create(_value))\n    }\n}))\n\n// 1) create the store\nlet theStore = TodoStore.create({})\n\n// 2) create a todo\ntheStore.addItem({\n    title: \"Aaron\",\n    description: \"Test Description\",\n    when: new Date() + \"\"\n})\n ```\n\n### Add the Mobx State Tree store to the angular application\n\nPaste the following code in the beginning of `home.ts` file. This is a temporary solution to show the integration of the store. We will eventually create a provider and inject the store using DI\n\n ```javascript\n import { types, onSnapshot, getSnapshot } from \"mobx-state-tree\"\n\n// TEMP, WILL MOVE LATER\nconst Todo = types.model(\"Todo\", {\n  title: types.string,\n  description: types.string,\n  when: types.string\n}).actions(self =\u003e ({\n\n}))\n\nconst TodoStore = types.model(\"TodoStore\", {\n  todos: types.optional(types.array(Todo), [])\n}).actions(self =\u003e ({\n  addItem(_value) {\n    self.todos.push(Todo.create(_value))\n  }\n}))\n// TEMP, WILL MOVE LATER\n\n```\n\nModify constructor by adding the following lines of code to the `home.ts` file\n```javascript\n\nlet items = [\n  { title: 'hi1', description: 'test1', when: \"2018-01-03T02:12:12.766Z\" },\n  { title: 'hi2', description: 'test2', when: \"2018-01-02T02:52:12.766Z\" },\n  { title: 'hi3', description: 'test3', when: \"2018-01-01T01:52:12.766Z\" }\n];\n\n// create the store with a default set of items\nthis.todoStore = TodoStore.create({ todos: items })\n\n```\nModify properties for the page by adding the following lines of code to the `home.ts` file\n\n```javascript\n\nimport { Component, ChangeDetectionStrategy } from '@angular/core'; // \u003c== NEW LINE - ChangeDetectionStrategy\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush, // \u003c== NEW LINE\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n\n  public items;\n  public todoStore: typeof TodoStore.Type // \u003c== NEW LINE\n\n```\n\nfinally open up the `home.html` and add the `*mobxAutorun` directive to the page to allow the page to detect the changes in the mobx-state-tree.\n\nalso notice where we are accessing the list of `todos` directly from the `todoStore.todos` property\n\nSee mobx-angular documentation for more information on `*mobxAutorun` directive -\u003e https://github.com/mobxjs/mobx-angular\n\n```html\n\n\u003cion-list *mobxAutorun\u003e\n    \u003cion-item\n        *ngFor=\"let item of todoStore.todos\"\n        (click)=\"viewItem(item)\"\u003e\n        \u003ch1\u003e{{item.title}}\u003c/h1\u003e\n        \u003cdiv\u003e{{item.description}}\u003c/div\u003e\n        \u003cdiv\u003e{{item.when | date: \"medium\" }}\u003c/div\u003e\n    \u003c/ion-item\u003e\n\u003c/ion-list\u003e\n\n```\nAt this point the application should run and you should see the items appearing in the list again.\n\n## Move store to seperate file and make it a provider\n\nsee the store code in `mst-store.ts`; no changes other than thos covered below to make it work as an Injectable provider\n\nTo get the mobx-state-tree to act as a provider, I needed to do the following in the store file I created\n```typescript\n// normal reqirement for a provider on angular2\n@Injectable()\n\n// code so that you can used the redux-dev-tools\n@remotedev({ name: 'TodoStore-aks', global: true, onlyActions: true })\n\n// we need to create a class that can be exported that represents the store..\nexport default class Store {\n    constructor() {\n        \n        // create an instance of the store...\n        let myStore = TodoStore.create({})\n        \n        // this allows the mst-dev-tool to inspect the store\n        makeInspectable(myStore);\n        \n        // return the actual store as the object which can be injected into\n        // you angular components\n        return myStore as ITodoStoreType\n    }\n}\n\n```\n## Access the store from your components\n\ndefine a property on your component to hold the injected store, we are defining the type \nso we can get the code completion functionality from your editor\n```typescript\npublic todoStore: ITodoStoreType\n```  \n\nNext use the store as you would any other provider\n```typescript\n  constructor(\n    public navCtrl: NavController,\n    public modalCtrl: ModalController,\n    public _todoStore: TodoStore) {\n\n    this.todoStore = _todoStore as ITodoStore\n\n  }\n  ```\n  \n## Add the item to the store\n  \nJust use the same code as before, we are just using the store that was injected into the component instead of creating one locally\n\n```typescript\nif (item) {\n  item.when = new Date() + \"\"\n  this.todoStore.addItem(item)\n}\n```\nhttps://github.com/aaronksaunders/mst-todo-ionic2/blob/master/src/pages/home/home.ts#L58\n\n- [TODO] Connect the deleteItem function to the todoStore\n- [TODO] Add list-item-swipe to list to implement deleteItem\n- [TODO] Connect delete action in UI to delete in todoStore\n- [TODO] Connect angularfire2\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fmst-todo-ionic2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Fmst-todo-ionic2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fmst-todo-ionic2/lists"}