React+Fluxxor+ajaxでfluxなTODOアプリと合わせて読んで下さい。
Web+DB Pressのvol86と87で伊藤直也さんのReact.js+Fluxの記事があったので勉強してみました。
ReactとMilkcocoaとうまく繋げられないかなぁと思って前回の記事のコードを元にMilkcocoa連携をやってみます。
前回はバックエンド開発が面倒だったのでPOSTしてデータを貯める仕組みは割愛しました。 Milkcocoaを使うことでフロント開発だけでデータ蓄積などが可能になります。 (リアルタイム機能がMilkcocoaの持ち味なんですけど、今回はデータ蓄積の部分だけにします。)
タイトルは参考にさせて頂いた橋本商会さんの記事(React+Fluxxor+socket.ioでfluxなチャットを作った)にかぶせてます笑
※ちなみにギークハウスデイというイベントがオンラインでやってるっぽいのでそれに乗っかってハッシュタグ付けてみました。(元ギークハウス住民←)
復習
前回のコードはこちらです。
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/からアプリ登録をしましょう。
Milkcocoaのアプリ管理画面でapp_idを確認しましょう。
index.htmlでMilkcocoaのライブラリ読み込みをします。
<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との接続情報を記述
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()でデータを取得してます。
/*省略*/
loadTodos: function(){
$.ajax({
url: "./todos.json"
}).done(function(data){
this.dispatch(constants.LOAD_TODOS_SUCCESS, {data: data});
}.bind(this));
},
/*省略*/
今回は変更してMilkcocoaのデータストアからstream()でデータを取得する作りに変更します。 ドキュメントはこちらです。
↓
/*省略*/
loadTodos: function(){
Mds.stream().sort('desc').next(function(err, data){
this.dispatch(constants.LOAD_TODOS_SUCCESS, {data: data});
}.bind(this));
},
/*省略*/
前回同様に非同期処理が完了のタイミングのコールバックでthis.dispatch()でアクションをストアに送ります。
ストア側の微修正
/*省略*/
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メソッドはこんな感じでした。
/*省略*/
addTodo: function(text) {
this.dispatch(constants.ADD_TODO, {text: text});
},
/*省略*/
viewから送られてきたテキスト情報をアクションメッセージとしてStoreに流しています。
↓
/*省略*/
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アプリができました。
まとめ
Ajax的な処理の部分を少し書き換えるだけで、Milkcocoa連携が出来ました。Fluxな構成になってると一部分だけを差し替えるだけで接続先が変更できそうです。少なくともReact部分のViewは同じコードで使いまわせるので、別のBaaSや自前のバックエンドとでも簡単に連携できそうだなぁと感じました。
次回はMilkcocoaでリアルタイム通信してみたいと思います。
※前回はこちら(React+Fluxxor+ajaxでfluxなTODOアプリ)です。