FluxでモックAction CreatorやモックStoreを作成しよう（2）
方法1. モックAction Creator
Action Creatorで、ダミーのActionを生成して dispatch() に渡します。実際はAPIやDBをコールしませんが、コールしたと仮定して、結果をActionという形式で dispatch() に渡します。
const ActionCreators = {
getArticle: () => Dispatcher.dispatch({type:'type1', data: {id: 1, text: 'How to use...'}}),
:
}
モックAPIであっても物理的なAPIが存在する場合、APIの設計に多少の難があったとしてもフロントエンド側で無理をしてしまいがちです。モックAPIより前の段階でモックAction Creatorを作って試行錯誤することで、フロントエンド内部の設計を洗練させることができます。
モックAction Creatorによるネットワーク透過性
試作段階でデモを行う際に、ネットワークの影響を排してアプリの振る舞いを固定したい場合はないでしょうか。次はモックAction Creatorを使ってあらかじめ取得したツイートを利用する例です。
import mockTweet from `../mock/tweet.json`; //あらかじめ取得したTweet
const ActionCreators = {
fetchTweet:() => Dispatcher.dispatch({type:'foo', data: mockTweet}),
:
}
ネットワークの状態に応じて、APIから取得するかモックデータを使うか、切り分けることもできます。以下はAPIがエラーの時だけモックデータを使用する例です。
fetchTweet:() => api.get(url)
.then(res => Dispatcher.dispatch({type:'foo', data: body})) //APIで取得したTweet
.catch(Dispatcher.dispatch({type:'foo', data: mockTweet})) //事前に取得したTweet
あらかじめネットワーク状態を設定して処理を切り替えることもできます。
fetchTweet:() => isReachable
? api.get(url).then(body => Dispatcher.dispatch({type:'foo', data: body})) // APIで取得したTweet
: dispatch({type:'foo', data: mockTweet}) //事前に取得したTweet
方法2. モックStore
Viewに表示させるデータを初めからStoreに格納しておく方法です。具体的にはStoreの getInitialState() の戻り値にモックデータを設定します。
class Store extends ReduceStore {
getInitialState() {
return [{id: 1, text:''}, {id:2, text: ''}, ...];
}
:
}
モックStoreは、柔軟性はないもののこれまで紹介した中では最も高速にViewを構築できる手法と言えるでしょう。
ReactとFluxを使うとアプリのViewから状態（Store）や操作（Action Creator）をきれいに分離できます。フロントエンドのあらゆる要素をコンポーネント化し、柔軟にモックと本物を切り替えられるため、プロトタイプから本番まで連続的に開発を進めることができます。
