はじめに

約半年ほど前(2015/12頃)、Reduxの名前をよく聞くようになったなあと感じた僕はReduxのチュートリアルをやって実際にアプリケーションを作ってみたりしてました。
そのときの感想としては「ActionCreatorでの非同期処理とかそこらへんの処理をするためにredux-thunk使ってるけどすげえごちゃごちゃしてきて管理しんどいなこれ」って感じでした。
その程度の感想だったためにそこから継続的に使うことはなくオレオレFluxでの開発をしてたりしたわけですが、最近こんなエントリーを見かけました。

redux-sagaで非同期処理と戦う

redux-sagaというMiddlewareを使うと今までredux-thunkでがんばるしかなかった非同期処理のつらみを解消してくれるということらしく、そして実際に使ってみると本当にとてもよかったです。
これは使っていくしかないということで最近はredux-sagaを使ってSPAの開発をしています。

redux-sagaとはなんなのかみたいな話は先にあげたエントリーでとても詳しく書かれているのでここでは詳しく書きません。

ということでテンプレートを作った

毎度毎度サーバー側用意してreduxとredux-sagaの土台作って、reactのコンポーネントの基本的なの用意して、ってのがめんどくさいだろうなと感じたためにテンプレートを用意してみました。

redux-saga-boilerplate

README.mdのGet startedの通りにやればredux-sagaでのSPA開発の基盤が用意できている状態になっています。全体的にそれぞれの役割を一目見てわかるようにするためにカウンターのサンプルも一応一緒になっています。
実際開発するときはこのサンプル見つつ書き換えていく感じになります。

使っているもの

サーバーサイド

Node.js
hapi.js

特にサーバー側で大きなことをやるつもりがないのでFWとしてhapiを使って軽めな感じにしています。
ちなみにサーバーサイドレンダリングには対応させていない状態です。
/config/default.jsonを作って設定を先に記述しておく必要があります。

クライアントサイド

redux
redux-saga
react-router(routing)
react

SPAでばりばり作るための環境にしています。
react-routerにreduxをつなげるためにredux-routerをはじめは使っていたのですが、なかなかエラーの解決ができずに結局react-router-reduxを使っています。

package.json

依存モジュールは以下のとおりです。

{
  "devDependencies": {
    "babel-eslint": "^6.0.4",
    "babel-plugin-syntax-async-functions": "^6.8.0",
    "babel-plugin-transform-regenerator": "^6.9.0",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    "eslint": "^2.10.2",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.0",
    "eslint-plugin-jsx-a11y": "^1.2.2",
    "eslint-plugin-react": "^5.1.1",
    "uglifyify": "^3.0.1",
    "watchify": "^3.7.0"
  },
  "dependencies": {
    "babel-cli": "^6.9.0",
    "config": "^1.20.4",
    "handlebars": "^4.0.5",
    "hapi": "^13.4.1",
    "inert": "^4.0.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-router-redux": "^4.0.4",
    "redux": "^3.5.2",
    "redux-act": "^0.4.2",
    "redux-logger": "^2.6.1",
    "redux-saga": "^0.10.4",
    "vision": "^4.1.0"
  }
}

トランスパイラはBABELでモジュールの読み込みはbrowserifyを使っています。
開発時はwatchifyで監視をします。

こんな感じで今後の開発のためのテンプレートにしてみました。
このリポジトリは今後もアップデートしていく予定です。

redux(Middleware: redux-saga)プロジェクトのテンプレートを作った