mobx-state-tree

2woongjae@gmail.com

Mark Lee (이웅재)

• Studio XID inc. ProtoPie Engineer
• Seoul.JS 오거나이저
• 타입스크립트 한국 유저 그룹 오거나이저
• 일렉트론 한국 유저 그룹 운영진
• Seoul.js 오거나이저
• Microsoft MVP - Visual Studio and Development Technologies
• Code Busking with Jimmy
  • https://www.youtube.com/channel/UCrKE8ihOKHxYHBzI0Ys-Oow

mobx-state-tree

mobx-state-tree ★ 2019

2018.01

mobx-state-tree 주요 특징

• MobX 를 알면 좋지만, 몰라도 쉽다.
• 모델과 그 모델에서 사용하는 액션을 기반으로 한다.
  • 모델의 타입을 중요시한다.
  • 액션의 async 에 제너레이터를 사용한다.
• TypeScript 가 Base 인 라이브러리이다.
  • 당연히 @types/mobx-state-tree 는 필요가 없음.
• Base 라이브러리를 설치 후 mobx-state-tree 를 설치한다.
  • npm i mobx -D
  • npm i mobx-react -D
  • npm i mobx-state-tree
• Provider 를 사용하지 않는다.

Quick Start - mobx-state-tree

프로젝트 준비

~/Project/workshop-201801 
➜ npx create-react-app mobx-state-tree-ts-quick-start --scripts-version=react-scripts-ts

~/Project/workshop-201801 took 1m 47s 
➜ cd mobx-state-tree-ts-quick-start/                                      

Project/workshop-201801/mobx-state-tree-ts-quick-start is 📦 v0.1.0 via ⬢ v8.9.4 
➜ npm i mobx mobx-react mobx-state-tree -D
+ mobx-react@4.3.5
+ mobx-state-tree@1.3.1
+ mobx@3.4.1
added 4 packages in 14.335s

models/users.tsx

import { types, getRoot, destroy } from 'mobx-state-tree';

const User = types
  .model({
    name: types.string,
    age: types.number
  })
  .actions(self => ({
    remove() {
      getRoot(self).removeTodo(self);
    },
    changeName(name: string) {
      self.name = name;
    },
    plusAge() {
      self.age = self.age + 1;
    },
    minusAge() {
      self.age = self.age - 1;
    }
  }));

export type IUser = typeof User.Type;

const UserStore = types
  .model({
    users: types.array(User)
  })
  .views(self => ({
    get allUsers() {
      return self.users;
    }
  }));

export type IUserStore = typeof UserStore.Type;

UserStore.actions(self => ({
  removeUser(user: IUser) {
    destroy(user);
  }
}));

export interface UserStoreType extends IUserStore {
  addUser: (name: string) => void;
}

export default UserStore;

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import UserStore from './models/users';

const store = UserStore.create({
  users: [
    {
      name: 'Mark',
      age: 36
    }
  ]
});

ReactDOM.render(<App store={store} />, document.getElementById(
  'root'
) as HTMLElement);
registerServiceWorker();

App.tsx

import * as React from 'react';
import './App.css';
import { IUserStore, IUser } from './models/users';
import autobind from 'autobind-decorator';
import { observer } from 'mobx-react';

const logo = require('./logo.svg');

interface AppProps {
  store: IUserStore;
}

@observer
class App extends React.Component<AppProps, {}> {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">{JSON.stringify(this.props.store.allUsers)}</p>
        <button onClick={this.click}>나이 먹어라</button>
      </div>
    );
  }

  @autobind
  click() {
    (this.props.store.users[0] as IUser).plusAge();
  }
}

export default App;

mobx-state-tree-ts-quick-start

https://github.com/2woongjae/mobx-state-tree-ts-quick-start