React+Fluxxor+MilkcocoaでfluxなTODOアプリ #geekhouseday


[React+Fluxxor+ajaxでfluxなTODOアプリ](http://qiita.com/n0bisuke/items/f19dd3958fb099373247)と合わせて読んで下さい。

>Web+DB Pressのvol86と87で伊藤直也さんのReact.js+Fluxの記事があったので勉強してみました。

![](http://i.gyazo.com/8379f8b1e2ee0b4e877926cee19df151.png)

Reactと[Milkcocoa](https://mlkcca.com/)とうまく繋げられないかなぁと思って[前回の記事](http://qiita.com/n0bisuke/items/f19dd3958fb099373247)のコードを元にMilkcocoa連携をやってみます。

前回はバックエンド開発が面倒だったのでPOSTしてデータを貯める仕組みは割愛しました。 **Milkcocoaを使うことでフロント開発だけでデータ蓄積などが可能になります。** (リアルタイム機能がMilkcocoaの持ち味なんですけど、今回はデータ蓄積の部分だけにします。)

> タイトルは参考にさせて頂いた橋本商会さんの記事([React+Fluxxor+socket.ioでfluxなチャットを作った](http://shokai.org/blog/archives/9929))にかぶせてます笑

※ちなみに[ギークハウスデイ](http://geekhouseday.com/)というイベントがオンラインでやってるっぽいのでそれに乗っかってハッシュタグ付けてみました。(元ギークハウス住民←)

## 復習

前回のコードはこちらです。
https://github.com/n0bisuke/react-study/tree/todo-flux-ajax

Ajax通信機能付きのTODOアプリです。

## React+FluxxorなTODOアプリとMillcocoaをつなげてみる

完成のコードはこちらです。https://github.com/n0bisuke/react-study/blob/origin/todo-flux-milkcocoa-1/src/app.jsx
以下で説明していきます。

### 0. Milkcocoaの準備

[https://mlkcca.com/](https://mlkcca.com/)からアプリ登録をしましょう。

Milkcocoaのアプリ管理画面で`app_id`を確認しましょう。
![](http://i.gyazo.com/05cb17c4d9863fcaa2103be18296169f.png)

`index.html`でMilkcocoaのライブラリ読み込みをします。

```index.html
<html>
  <head>
    <title>TODOリスト</title>
  </head>
  <body>
    <div id="app-container"></div>
    <script src='https://cdn.mlkcca.com/v2.0.0/milkcocoa.js'></script>
    <script charset="utf-8" src="dest/app.js"></script>
  </body>
</html>
```

### 1. app.jsxにMilkcocoaとの接続情報を記述

> [3-4行目](https://github.com/n0bisuke/react-study/blob/origin/todo-flux-milkcocoa-1/src/app.jsx#L3-L4)

```app.jsx
var React   = require('react');
var Fluxxor = require('fluxxor');
var milkcocoa = new MilkCocoa("{app_id}.mlkcca.com"); //追加
var Mds = milkcocoa.dataStore('todos'); //追加

/*省略*/
```

3行目でapp_idを自分の環境に合わせて記述、4行目では`todos`というデータストアを作ってそのデータストアとの接続をします。
データストアは任意の名前を付けられます。

### 2. Action(Action Creator)のloadTodosメソッドをMilkcocoaな書き方に

前回のloadTodosの中身はこんな感じでした。jQueryの.ajax()でデータを取得してます。

```app.jsx
/*省略*/
loadTodos: function(){
    $.ajax({
      url: "./todos.json"
    }).done(function(data){
      this.dispatch(constants.LOAD_TODOS_SUCCESS, {data: data});
    }.bind(this));
  },
/*省略*/
```

今回は変更してMilkcocoaのデータストアから`stream()`でデータを取得する作りに変更します。 ドキュメントは[こちら](https://mlkcca.com/document/api-js.html)です。
↓

>[63-67行目](https://github.com/n0bisuke/react-study/blob/origin/todo-flux-milkcocoa-1/src/app.jsx#L63-L67)

```app.jsx
/*省略*/
  loadTodos: function(){
    Mds.stream().sort('desc').next(function(err, data){
      this.dispatch(constants.LOAD_TODOS_SUCCESS, {data: data});
    }.bind(this));
  },
/*省略*/
```

前回同様に非同期処理が完了のタイミングのコールバックで`this.dispatch()`でアクションをストアに送ります。

#### ストア側の微修正

>[48行目](https://github.com/n0bisuke/react-study/blob/origin/todo-flux-milkcocoa-1/src/app.jsx#L48)

```app.jsx

/*省略*/
  onLoadTodosSuccess: function(payload){
    payload.data.forEach(function(item){
      var id = ++this.todoId;
      var todo = {
        id: id,
        text: item.value.text, //変更: Milkcocoa
        complete: false
      };
      this.todos[id] = todo;
    }.bind(this));
    this.emit('change');
  },

/*省略*/
```

48行目はMilkcocoaのオブジェクトの形に合わせて微修正です。

### 3. Action(Action Creator)のaddTodoメソッドの変更

前回は説明してなかったのですがaddTodoメソッドは[こんな感じ](https://github.com/n0bisuke/react-study/blob/todo-flux-ajax/src/app.jsx#L65-L67)でした。

```app.jsx
/*省略*/
 addTodo: function(text) {
    this.dispatch(constants.ADD_TODO, {text: text});
  },
/*省略*/
```

viewから送られてきたテキスト情報をアクションメッセージとしてStoreに流しています。

↓
>[70行目](https://github.com/n0bisuke/react-study/blob/origin/todo-flux-milkcocoa-1/src/app.jsx#L70-L74)

```app.jsx
/*省略*/
addTodo: function(text) {
    Mds.push({'text' : text },function(err, pushed){
      this.dispatch(constants.ADD_TODO, {text: pushed.value.text});
    }.bind(this));
  },
/*省略*/
```

Milkcocoaの`push()`でデータストアにデータを保存します。Action内だけで非同期処理をするという作法なので保存が完了したコールバックで`this.dispatch()`でデータをStoreに送ります。

### 4. 実行してみる

これで、データ追加するときにMilkcocoaにデータを保存し、ページ読み込み時にMilkcocoaからデータを取得するTODOアプリができました。

![](http://i.gyazo.com/8c01202909c694d523011d10c12877d5.gif)

##まとめ

Ajax的な処理の部分を少し書き換えるだけで、Milkcocoa連携が出来ました。Fluxな構成になってると一部分だけを差し替えるだけで接続先が変更できそうです。少なくともReact部分のViewは同じコードで使いまわせるので、別のBaaSや自前のバックエンドとでも簡単に連携できそうだなぁと感じました。

次回はMilkcocoaでリアルタイム通信してみたいと思います。

※前回はこちら([React+Fluxxor+ajaxでfluxなTODOアプリ](http://qiita.com/n0bisuke/items/f19dd3958fb099373247))です。