JavaScript
mocha
chai
redux

redux を React などと組み合わせずに入門する

はじめに

流行りの redux を React 等、他のフレームワーク/ライブラリと【組み合わせず】に触ってみたので、その記録を残します。
redux という言葉を最近よく聞くけど何なのかは知らない人に、redux がどういうものなのかを知って、使い始めてもらえればもらえれば幸いです。

ついでに、redux はユニットテストに落とし込みやすいと知ったので、mochaとchaiを使ってユニットテストも書いています。
良ければご参考に。

対象

この記事は
- redux を触ったことがない
- JS はある程度触ったことがある
- (必須)webpack, ES6記法 を多分に使っているので、読むことが出来る方
を対象としています。

Redux とは

こちらの記事が素晴らしくわかりやすい概念の説明(なんならこれだけでもだいたい理解できちゃう…)が載っているのでぜひご覧ください。

reduxは一言でいうと、アプリ内のデータを一元管理することで管理を簡潔に行うためのフレームワークです。

ソースコード

こちらにて、Git/GitHubを使って公開しています。(途中からコミットメッセージに何をやったのかを記載してます。)

ソースコードと基本的な各処理の解説

初期化時

  1. storeを作成 (index.js内のここ)
  2. reducer (todo.js内のメソッド)を登録する

各アクション時

  1. view (index.js 内の各メソッド(特にdeleteTodoWithIndex, getContent)) で受け取る
  2. action Creator (action.js 内のメソッド) に渡して、action化する
  3. action化したものをdispatchでstore (実質はreducer (todo.js内のメソッド)) に渡す。
  4. reducer の中でstoreの中のstate(※第一引数に自動で渡されるオブジェクト)を受け取ったactionを元に変化させたコピーを作って、返す
  5. viewでstore(reducer)から受け取った変化後のstateを元に画面を再描画(viewのこのあたりで)する。

その他に redux の機能を使った部分

reducer/state 分割

reducer.jsは redux の combineReducers を使って、複数のreducer(todo.js/input.js)を統合して1つの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側で管理するのか、一定のところまで把握できていて、データの構造を設計できている時です。
 データの構造を元に、それに対する処理(action/reducer)を追加して行くにはとても向いています。

以上、拙い文章でしたが、この記事が redux を触ってみるきっかけになれば幸いです。