Redux Study Day1 - Start

準備開始學習使用 Redux

開始準備

其中我覺得 ECMAScript 6 一定要先懂，因為，基本上現在你找的到的 Redux 範例，都會是 ES6 的語法了
所以，如果你不先了解 ES6 的語法，一定會很痛苦.....

當然，你要用 Redux 前要先了解 Flux 是什麼會比較好
以下這張圖大概就是 Flux 最著名的一張架構圖了 .....

參考範例

我個人覺得 Redux-Hacker-News 的確是寫的不錯的～

開始實作

本來我要用 yo 來做開始，後來發現產生出來的東西，大部分我都不懂，乾脆參考 Hacker-News 的範例重新來一次～
之後遇到要使用到的時候再裝，印象比較深刻，比較知道自己在用什麼

套件安裝

當然，先裝基本的 React/Redux 

1
npm install --save redux
2
npm install --save react

接下來是安裝開發環境要用的，比如說 webpack, babel 等

1
npm install --save-dev babel-core
2
npm install --save-dev babel-loader
3
npm install --save-dev babel-plugin-react-transform
4
npm install --save-dev webpack-dev-middleware
5
npm install --save-dev webpack-hot-middleware

安裝完之後，我的 package.json 大概是長下面這樣子的 

1
{
2
  // 其他我就不貼了～
3
  "dependencies": {
4
    "react": "^0.14.0",
5
    "redux": "^3.0.2"
6
  },
7
  "devDependencies": {
8
    "babel-core": "^5.8.25",
9
    "babel-loader": "^5.3.2",
10
    "babel-plugin-react-transform": "^1.1.1",
11
    "redux-devtools": "^2.1.5",
12
    "webpack": "^1.12.2",
13
    "webpack-dev-middleware": "^1.2.0",
14
    "webpack-hot-middleware": "^2.4.1"
15
  }
16
}

準備 webpack.config.js

不得不說，我覺得 redux-hacker-news 的 webpack.config.js 蠻不錯的，所以就直接先複製過來使用了！ 

1
var path = require('path');
2
var webpack = require('webpack');
3
4
module.exports = {
5
  devtool: 'cheap-module-eval-source-map',
6
  entry: [
7
    'webpack-hot-middleware/client',
8
    './index'
9
  ],
10
  output: {
11
    path: path.join(__dirname, 'dist'),
12
    filename: 'bundle.js',
13
    publicPath: '/static/'
14
  },
15
  plugins: [
16
    new webpack.optimize.OccurenceOrderPlugin(),
17
    new webpack.HotModuleReplacementPlugin(),
18
    new webpack.NoErrorsPlugin()
19
  ],
20
  module: {
21
    loaders: [{
22
      test: /\.js$/,
23
      loaders: ['babel'],
24
      exclude: /node_modules/,
25
      include: __dirname
26
    },{
27
      test: /\.css$/,
28
      loader: 'style!css'
29
    },{
30
      test: /\.gif$/,
31
      loader: 'url?limit=10000&minetype=image/gif'
32
    }]
33
  }
34
};

準備一個測試的 server

一樣，hacker-news 的 server.js，很簡單也很實用～
但是因為會用到 express ，補一下 npm install 

1
npm install --save-dev express

server.js 程式碼 

1
var webpack = require('webpack');
2
var webpackDevMiddleware = require('webpack-dev-middleware');
3
var webpackHotMiddleware = require('webpack-hot-middleware');
4
var config = require('./webpack.config');
5
6
var app = new require('express')();
7
var port = 3000;
8
9
var compiler = webpack(config);
10
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
11
app.use(webpackHotMiddleware(compiler));
12
app.use(function(req, res) {
13
  res.sendFile(__dirname + '/index.html');
14
});
15
16
app.listen(port, function(error) {
17
  if (error) {
18
    console.error(error);
19
  } else {
20
    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port);
21
  }
22
});

本來想說測試一下，直接 run 一下 node server.js 看看有沒有問題，結果就出現了下面的錯誤： 

1
$ node server.js
2
==> 🌎  Listening on port 3000. Open up http://localhost:3000/ in your browser.
3
webpack built 9cc6533f9b26bec5e1ce in 190ms
4
Hash: 9cc6533f9b26bec5e1ce
5
Version: webpack 1.12.2
6
Time: 190ms
7
    Asset   Size  Chunks       Chunk Names
8
bundle.js  45 kB       0       main
9
chunk    {0} bundle.js (main) 7.69 kB [rendered]
10
    [0] multi main 40 bytes {0} [built] [1 error]
11
    [1] (webpack)-hot-middleware/client-overlay.js 883 bytes {0} [built]
12
    [2] (webpack)-hot-middleware/client.js 3.27 kB {0} [built]
13
    [3] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
14
    [4] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
15
    [5] (webpack)-hot-middleware/process-update.js 2.93 kB {0} [built]
16
    [6] (webpack)/buildin/module.js 251 bytes {0} [built]
17
18
ERROR in multi main
19
Module not found: Error: Cannot resolve 'file' or 'directory' ./index in /Volumes/RamDisk/redux-study
20
 @ multi main

最後試著試著發現，本來以為是我漏掉了 index.html，但最後發現，其實 index.js 才是最重要的
當我做了下面的動作 

1
$ touch index.js

再執行 node server.js，感覺上就正常了！ 

1
$ node server.js
2
==> 🌎  Listening on port 3000. Open up http://localhost:3000/ in your browser.
3
webpack built 1e04a7ed2baa7052b68b in 771ms
4
webpack building...
5
webpack built 1e04a7ed2baa7052b68b in 8ms

index.html

其實，因為 React 算是走 SPA 路線的，所以其實首頁很簡單，可以像下面這樣 

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Redux Study</title>
5
  </head>
6
  <body>
7
    <div id="root">Hello
8
    </div>
9
    <script src="/static/bundle.js"></script>
10
  </body>
11
</html>

其中，javascript 是使用了一個目前還沒產生的檔案
不過，透過 webpack-dev-middleware，這個檔案在你執行 server.js 的時候會動態產生
所有檔案，都會 on-fly 在記憶體中處理，不需要像以前一樣產生一堆暫存檔案

不過，記得這只是在開發階段方便而已，Production 階段還是要產生實體的 bundle.js 檔案

就如同 webpack-dev-middleware 的 README 就說到：

THIS MIDDLEWARE SHOULD ONLY USED FOR DEVELOPMENT! DO NOT USE IT IN PRODUCTION!

第一天結後心得

其實，對不太熟悉 javascript 開發的人來講，像我這樣，準備環境比較不容易
尤其我記得我有印象的，還是在 grunt/gulp 階段～
不過才沒幾個月，一堆工具又出來了，雖然是為了 ES6 而產生的工具，但是還是覺得太多東西要學了
webpack 去年就聽過了，不過聽不太懂，所以本來是要放棄的。但是現在感覺好像又不是我之前聽過的那樣了～～～
變化真快

之後可能還要對 webpack 多多了解一下....

至於 Redux 本身，大概又是另外一個難解的問題，需要好好了解了～