Redux Todoサンプルを npmとwebpackで最小の環境を作って動かす

はじめに

Reactの勉強をはじめて、大雑把に理解したら、Reduxの勉強をしたくなりますよね。

しかしまぁ・・・Reduxムズイ！！

となるわけで、とにかくRedux本家にあるTodoのサンプルのソースを眺めるも・・
わかったようなわからないような状態になる。
兎にも角にも、実際に動かしてみなきゃ始まらない。そのための環境を作るのも
最初はちんぷんかんぷんだったりするのですよね・・・

なので、Redux本家にあるTodoサンプルをnpm と Webpackを使って最小環境を作って
動作させるところまでたどり着くのが今回の目標です。
Todoサンプルの内容には踏み込みません、あくまで動くところまで。

最終動作イメージはこんな感じ。

作り上げるフォルダとファイルの構成はこんな感じ。

npmでパッケージをインストールする

[bash]
$ cd ~/workspace
$ mkdir redux_todo
$ cd redux_todo
$ npm init -y
$ npm install –save react react-dom redux react-redux
$ npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server
[/bash]

packege.jsonを調整

変更前
[bash]
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},

[/bash]

変更後（2行追記）
[bash]
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “webpack-dev-server –content-base dist/ –hot –inline –progress –colors”,
“build”: “webpack –progress –colors”
},

[/bash]

webpack.config.jsを作成

[bash]
$ nano webpack.config.js
[/bash]

[bash]
var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {
entry: {
main: ‘./index.js’,
},
output: {
path: path.join(__dirname, ‘dist’),
filename: “[name].bundle.js”
},
module: {
loaders: [
{
test: /\.js[x]?$/,
loader: ‘babel-loader’,
exclude: /node_modules/,
query: {
presets: [‘es2015’, ‘react’]
}
}
]
},
resolve: {
extensions: [‘.js’, ‘.jsx’]
},
devServer: {
inline: true,
hot: true
}
}

[/bash]

distフォルダ準備

[bash]
$ mkdir dist
[/bash]

Todoアプリのトップレベルのファイルを作成(index.js)

トップレベル(Entry Point)のファイルであるindex.jsを作成します。

[bash]
$ nano index.js
[/bash]

[bash]
import React from “react”
import {render} from “react-dom”
import {createStore} from “redux”
import {Provider} from “react-redux”
import todoApp from “./reducers”
import App from “./components/App”

document.write(“

“);

let store = createStore(todoApp)

render (


,
document.getElementById(“root”)
)

[/bash]

ひたすら redux本家のTodoに記載されたファイルをコピーして作る

redux本家のこのページを見ながら
最終目標であるこのイメージに合うようにファイルを作って中身をコピーしてきます。

全ファイルをマージしてコンパイル

これしなくても大丈夫です。コンパイル結果を知りたいときは、やってみてください。
[bash]
$ ./node_modules/.bin/webpack
[/bash]

起動確認

[bash]
$ npm start
[/bash]

ブラウザーで

http://localhost:8080/webpack-dev-server/main.bundle

にアクセスして、下のような画面が出てきたらOK。

※追記
上記URLではうまく表示できなくなる場合があります。package.jsonで指定したcontent-baseが
効かないケースがあるみたい（原因不明）
その場合は、以下のURLにアクセス。
http://localhost:8080/webpack-dev-server/dist/main.bundle

redux学習方法

とにかく目を皿のようにして、ひたすらサンプルソースを追いかける。

追いかける

追いかける

追いかける（笑）

このページの解説(reactとreduxを使ったExampleのソースコードリーディング:todos編) なかなか良く出来ているので参照したらいいです。

補足

ソースコードをいじったら、自動で更新されるようになります。便利。。。
webpack.config.js　で指定した dist パスへコンパイル後のファイルが出来ませんが
メモリ上で展開されて動くらしいです。
どんなファイルが作られているか確認したい場合は、以下のコマンドで、dist/main.bundle.jsが出来ます。

[bash]
$ ./node_modules/.bin/webpack
[/bash]

実運用を想定してindex.htmlを作成

実運用ではエントリーポイントとなるHTMLが必要なので、distフォルダにindex.htmlを作成します。

[bash]

[/bash]

これで、
http://localhost:8080
で実運用の動作イメージの出来上がり。

感想とうか雑感というか

Redux　かなり難しいですよね。
Reactはほぼ分かったので、Reduxも楽勝だろうと思いきや・・・・
Redux本家のこのTodoサンプルを理解して、写経して、空で暗記してイチから作り上げれるようになるまで
3日ほど要しました。

Reduxおそるべし。

ってか、こんなの理解して、みんな開発してるのかな・・・
ReduxとReactの組み合わせ、かなり難しいような気がするなぁ・・・