はじめに
流行りの redux を React 等、他のフレームワーク/ライブラリと【組み合わせず】に触ってみたので、その記録を残します。
redux という言葉を最近よく聞くけど何なのかは知らない人に、redux がどういうものなのかを知って、使い始めてもらえればもらえれば幸いです。
ついでに、redux はユニットテストに落とし込みやすいと知ったので、mochaとchaiを使ってユニットテストも書いています。
良ければご参考に。
対象
この記事は
- redux を触ったことがない
- JS はある程度触ったことがある
- （必須）webpack, ES6記法 を多分に使っているので、読むことが出来る方
を対象としています。
Redux とは
こちらの記事が素晴らしくわかりやすい概念の説明（なんならこれだけでもだいたい理解できちゃう…）が載っているのでぜひご覧ください。
reduxは一言でいうと、アプリ内のデータを一元管理することで管理を簡潔に行うためのフレームワークです。
ソースコード
こちらにて、Git/GitHubを使って公開しています。（途中からコミットメッセージに何をやったのかを記載してます。）
ソースコードと基本的な各処理の解説
初期化時
- storeを作成 (index.js内のここ)
- reducer (todo.js内のメソッド)を登録する
各アクション時
- view (index.js 内の各メソッド(特にdeleteTodoWithIndex, getContent)) で受け取る
- action Creator (action.js
内のメソッド) に渡して、action化する - action化したものをdispatchでstore (実質はreducer (todo.js内のメソッド)) に渡す。
- reducer の中でstoreの中のstate(※第一引数に自動で渡されるオブジェクト)を受け取ったactionを元に変化させたコピーを作って、返す
- viewでstore(reducer)から受け取った変化後のstateを元に画面を再描画(viewのこのあたりで)する。
その他に redux の機能を使った部分
reducer/state 分割
reducer.jsは redux の combineReducers を使って、複数のreducer(todo.js/input.js)を統合して１つのreducerのように振る舞うようにしています。
redux に利用に必要な環境
webpack と babel と npm を使います
使用ライブラリとバージョン
package.json>dependencies
{
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"mocha": "^3.5.3",
"redux": "^3.7.2",
"webpack": "^3.5.6"
}
メモがてら自分が走らせたコマンドを…
npm init -y
npm install --save babel babel-core babel-loader babel-preset-es2015 babel-register chai mocha redux webpack
webpackの設定・babelの設定
.babelrc
{
"presets": ["es2015"]
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
devtool: 'inline-source-map',
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
}
package.json>scripts
{
"start": "webpack --watch",
"test": "mocha --compilers js:babel-register --recursive ./test"
}
まとめ
触ってみた感想
- redux やることによってよりJSのAPIの返り値に詳しくなりそう（作った処理の返り値に注目する必要があるため）
- redux はきちんとどういったstateを持つのか設計してから処理を書いていく形を取るのがベター。 (https://twitter.com/ahaha0807_alg/status/909296617789972483 / https://twitter.com/ahaha0807_alg/status/909297363461619712)
- きっちり処理・データの分割をしやすい機能がreduxには揃ってるので、だんだん規模が大きくなるに連れて分割が気持ちよく出来て興奮する (https://twitter.com/ahaha0807_alg/status/907985104173019136)
- redux関係ないけど、JSのsplice使い勝手悪い
reduxが活きそうと感じたところ
どんなデータをJS側で管理するのか、一定のところまで把握できていて、データの構造を設計できている時です。
データの構造を元に、それに対する処理(action/reducer)を追加して行くにはとても向いています。
以上、拙い文章でしたが、この記事が redux を触ってみるきっかけになれば幸いです。