用 React + Router + Redux + ImmutableJS 寫一個 Github 查詢應用

前言

學了一身本領後，本章將帶大家完成一個單頁式應用程式（Single Page Application），整合 React + Redux + ImmutableJS + React Router 搭配 Github API 製作一個簡單的 Github 使用者查詢應用，實際體驗一下開發 React App 的感受。

功能規劃

讓訪客可以使用 Github ID 搜尋 Github 使用者，展示 Github 使用者名稱、follower、following、avatar_url 並可以返回首頁。

使用技術

  1. React
  2. Redux
  3. Redux Thunk
  4. React Router
  5. ImmutableJS
  6. Fetch
  7. Material UI
  8. Roboto Font from Google Font
  9. Github API（https://api.github.com/users/torvalds）

不過要注意的是 Github API 若沒有使用 App key 的話可以呼叫 API 的次數會受限

專案成果截圖

React Redux

React Redux

環境安裝與設定

  1. 安裝 Node 和 NPM

  2. 安裝所需套件

  1. $ npm install --save react react-dom redux react-redux react-router immutable redux-immutable redux-actions whatwg-fetch redux-thunk material-ui react-tap-event-plugin
  1. $ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-1 eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react html-webpack-plugin webpack webpack-dev-server redux-logger

接下來我們先設定一下開發文檔。

  1. 設定 Babel 的設定檔： .babelrc

    1.  {
    2.      "presets": [
    3.        "es2015",
    4.        "react",
    5.       ],
    6.      "plugins": []
    7.  }

  2. 設定 ESLint 的設定檔和規則： .eslintrc

    1.  {
    2.    "extends": "airbnb",
    3.    "rules": {
    4.      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    5.    },
    6.    "env" :{
    7.      "browser": true,
    8.    }
    9.  }

  3. 設定 Webpack 設定檔： webpack.config.js

    1.  // 讓你可以動態插入 bundle 好的 .js 檔到 .index.html
    2.  const HtmlWebpackPlugin = require('html-webpack-plugin');
    4.  const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    5.    template: `${__dirname}/src/index.html`,
    6.    filename: 'index.html',
    7.    inject: 'body',
    8.  });
    10.  // entry 為進入點，output 為進行完 eslint、babel loader 轉譯後的檔案位置
    11.  module.exports = {
    12.    entry: [
    13.      './src/index.js',
    14.    ],
    15.    output: {
    16.      path: `${__dirname}/dist`,
    17.      filename: 'index_bundle.js',
    18.    },
    19.    module: {
    20.      preLoaders: [
    21.        {
    22.          test: /\.jsx$|\.js$/,
    23.          loader: 'eslint-loader',
    24.          include: `${__dirname}/src`,
    25.          exclude: /bundle\.js$/
    26.        }
    27.      ],
    28.      loaders: [{
    29.        test: /\.js$/,
    30.        exclude: /node_modules/,
    31.        loader: 'babel-loader',
    32.        query: {
    33.          presets: ['es2015', 'react'],
    34.        },
    35.      }],
    36.    },
    37.    // 啟動開發測試用 server 設定（不能用在 production）
    38.    devServer: {
    39.      inline: true,
    40.      port: 8008,
    41.    },
    42.    plugins: [HTMLWebpackPluginConfig],
    43.  };

太好了！這樣我們就完成了開發環境的設定可以開始動手實作 Github Finder 應用程式了！

動手實作

  1. Setup Mockup

    HTML Markup（src/index.html）：

    1.  <!DOCTYPE html>
    2.  <html lang="en">
    3.  <head>
    4.    <meta charset="UTF-8">
    5.      <title>GithubFinder</title>
    6.      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    7.  </head>
    8.  <body>
    9.      <div id="app"></div>
    10.  </body>
    11.  </html>

    設定 webpack.config.js 的進入點 src/index.js：

    1.  import React from 'react';
    2.  import ReactDOM from 'react-dom';
    3.  import { Provider } from 'react-redux';
    4.  import { browserHistory, Router, Route, IndexRoute } from 'react-router';
    5.  import injectTapEventPlugin from 'react-tap-event-plugin';
    6.  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
    7.  import Main from './components/Main';
    8.  import HomePageContainer from './containers/HomePageContainer';
    9.  import ResultPageContainer from './containers/ResultPageContainer';
    10.  import store from './store';
    12.  // 引入 react-tap-event-plugin 避免 material-ui onTouchTap event 會遇到的問題
    13.  // Needed for onTouchTap
    14.  // http://stackoverflow.com/a/34015469/988941
    15.  injectTapEventPlugin();
    17.  // 用 react-redux 的 Provider 包起來將 store 傳遞下去，讓每個 components 都可以存取到 state
    18.  // 這邊使用 browserHistory 當做 history，並使用 material-ui 的 MuiThemeProvider 包裹整個 components
    19.  // 由於這邊是簡易的 App 我們設計了 Main 為母模版，其有兩個子元件 HomePageContainer 和 ResultPageContainer，其中 HomePageContainer 為根位置的子元件
    20.  ReactDOM.render(
    21.    <Provider store={store}>
    22.      <MuiThemeProvider>
    23.        <Router history={browserHistory}>
    24.          <Route path="/" component={Main}>
    25.            <IndexRoute component={HomePageContainer} />
    26.            <Route path="/result" component={ResultPageContainer} />
    27.          </Route>
    28.        </Router>
    29.      </MuiThemeProvider>
    30.    </Provider>,
    31.    document.getElementById('app')
    32.  );

  2. Actions

    首先先定義 actions 常數：

    1.  export const SHOW_SPINNER = 'SHOW_SPINNER';
    2.  export const HIDE_SPINNER = 'HIDE_SPINNER';
    3.  export const GET_GITHUB_INITIATE = 'GET_GITHUB_INITIATE';
    4.  export const GET_GITHUB_SUCCESS = 'GET_GITHUB_SUCCESS';
    5.  export const GET_GITHUB_FAIL = 'GET_GITHUB_FAIL';
    6.  export const CHAGE_USER_ID = 'CHAGE_USER_ID';

    現在我們來規劃我們的 actions 的部份，這個範例我們使用到了 redux-thunk 來處理非同步的 action（若讀者對於新的 Ajax 處理方式 fetch() 不熟悉可以先參考這個文件）。以下是 src/actions/githubActions.js 完整程式碼：

    1.  // 這邊引入了 fetch 的 polyfill，考以讓舊的瀏覽器也可以使用 fetch
    2.  import 'whatwg-fetch';
    3.  // 引入 actionTypes 常數
    4.  import {
    5.    GET_GITHUB_INITIATE,
    6.    GET_GITHUB_SUCCESS,
    7.    GET_GITHUB_FAIL,
    8.    CHAGE_USER_ID,
    9.  } from '../constants/actionTypes';
    11.  // 引入 uiActions 的 action
    12.  import {
    13.    showSpinner,
    14.    hideSpinner,
    15.  } from './uiActions';
    17.  // 這邊是這個範例的重點，要學習我們之前尚未講解的非同步 action 處理方式：不同於一般同步 action 直接發送 action，非同步 action 會回傳一個帶有 dispatch 參數的 function，裡面使用了 Ajax（這裡使用 fetch()）進行處理
    18.  // 一般和 API 互動的流程：INIT（開始請求/秀出 spinner）-> COMPLETE（完成請求/隱藏 spinner）-> ERROR（請求失敗）
    19.  // 這次我們雖然沒有使用 redux-actions 但我們還是維持標準 Flux Standard Action 格式：{ type: '', payload: {} }
    21.  export const getGithub = (userId = 'torvalds') => {
    22.    return (dispatch) => {
    23.      dispatch({ type: GET_GITHUB_INITIATE });
    24.      dispatch(showSpinner());
    25.      fetch('https://api.github.com/users/' + userId)
    26.        .then(function(response) { return response.json() })
    27.        .then(function(json) { 
    28.          dispatch({ type: GET_GITHUB_SUCCESS, payload: { data: json } });
    29.          dispatch(hideSpinner());
    30.        })
    31.        .catch(function(response) { dispatch({ type: GET_GITHUB_FAIL }) });
    32.    } 
    33.  }
    35.  // 同步 actions 處理，回傳 action 物件
    36.  export const changeUserId = (text) => ({ type: CHAGE_USER_ID, payload: { userId: text } });

    以下是 src/actions/uiActions.js 負責處理 UI 的行為：

    1.  import { createAction } from 'redux-actions';
    2.  import {
    3.    SHOW_SPINNER,
    4.    HIDE_SPINNER,
    5.  } from '../constants/actionTypes';
    7.  // 同步 actions 處理，回傳 action 物件
    8.  export const showSpinner = () => ({ type: SHOW_SPINNER});
    9.  export const hideSpinner = () => ({ type: HIDE_SPINNER});

    透過於 src/actions/index.js 將我們 actions 輸出

    1.  export * from './uiActions';
    2.  export * from './githubActions';

  3. Reducers

    接下來我們要來設定一下 Reducers 和 models（initialState 格式）的設計，注意我們這個範例都是使用 ImmutableJS。以下是 src/constants/models.js：

    1.  import Immutable from 'immutable';
    3.  export const UiState = Immutable.fromJS({
    4.    spinnerVisible: false,
    5.  });
    7.  // 我們使用 userId 來暫存使用者 ID，data 存放 Ajax 取回的資料
    8.  export const GithubState = Immutable.fromJS({
    9.    userId: '',
    10.    data: {},
    11.  });

    以下是 src/reducers/data/githubReducers.js：

    1.  import { handleActions } from 'redux-actions';
    2.  import { GithubState } from '../../constants/models';
    4.  import {
    5.    GET_GITHUB_INITIATE,
    6.    GET_GITHUB_SUCCESS,
    7.    GET_GITHUB_FAIL,
    8.    CHAGE_USER_ID,
    9.  } from '../../constants/actionTypes';
    11.  const githubReducers = handleActions({ 
    12.    // 當使用者按送出按鈕，發出 GET_GITHUB_SUCCESS action 時將接收到的資料 merge 
    13.    GET_GITHUB_SUCCESS: (state, { payload }) => (
    14.      state.merge({
    15.        data: payload.data,
    16.      })
    17.    ),  
    18.    // 當使用者輸入使用者 ID 會發出 CHAGE_USER_ID action 時將接收到的資料 merge 
    19.    CHAGE_USER_ID: (state, { payload }) => (
    20.      state.merge({
    21.        'userId':
    22.        payload.userId
    23.      })
    24.    ),
    25.  }, GithubState);
    27.  export default githubReducers;

    以下是 src/reducers/ui/uiReducers.js：

    1.  import { handleActions } from 'redux-actions';
    2.  import { UiState } from '../../constants/models';
    4.  import {
    5.    SHOW_SPINNER,
    6.    HIDE_SPINNER,
    7.  } from '../../constants/actionTypes';
    9.  // 隨著 fetch 結果顯示 spinner
    10.  const uiReducers = handleActions({
    11.    SHOW_SPINNER: (state) => (
    12.      state.set(
    13.        'spinnerVisible',
    14.        true
    15.      )
    16.    ),
    17.    HIDE_SPINNER: (state) => (
    18.      state.set(
    19.        'spinnerVisible',
    20.        false
    21.      )
    22.    ),
    23.  }, UiState);
    25.  export default uiReducers;

    將 reduces 使用 redux-immutable 的 combineReducers 在一起。以下是 src/reducers/index.js：

    1.  import { combineReducers } from 'redux-immutable';
    2.  import ui from './ui/uiReducers';// import routes from './routes';
    3.  import github from './data/githubReducers';// import routes from './routes';
    5.  const rootReducer = combineReducers({
    6.    ui,
    7.    github,
    8.  });
    10.  export default rootReducer;

    運用 redux 提供的 createStore API 把 rootReducer、initialState、middlewares 整合後創建出 store。以下是 src/store/configureSotore.js

    1.  import { createStore, applyMiddleware } from 'redux';
    2.  import reduxThunk from 'redux-thunk';
    3.  import createLogger from 'redux-logger';
    4.  import Immutable from 'immutable';
    5.  import rootReducer from '../reducers';
    7.  const initialState = Immutable.Map();
    9.  export default createStore(
    10.    rootReducer,
    11.    initialState,
    12.    applyMiddleware(reduxThunk, createLogger({ stateTransformer: state => state.toJS() }))
    13.  );

  4. Build Component

    終於我們進入了 View 的細節設計，首先我們先針對母模版，也就是每個頁面都會出現的 AppBar 做設計。以下是 src/components/Main/Main.js： 

    1.  import React from 'react';
    2.  // 引入 AppBar
    3.  import AppBar from 'material-ui/AppBar';
    5.  const Main = (props) => (
    6.    <div>
    7.      <AppBar
    8.        title="Github Finder"
    9.        showMenuIconButton={false}
    10.      />
    11.      <div>
    12.        {props.children}
    13.      </div>
    14.    </div>
    15.  );
    17.  // 進行 propTypes 驗證
    18.  Main.propTypes = {
    19.    children: React.PropTypes.object,
    20.  };
    22.  export default Main;

    以下是 src/components/ResultPage/HomePage.js： 

    1.  import React from 'react';
    2.  // 使用 react-router 的 Link 當做超連結，傳送 userId 當作 query
    3.  import { Link } from 'react-router';
    4.  import RaisedButton from 'material-ui/RaisedButton';
    5.  import TextField from 'material-ui/TextField';
    6.  import IconButton from 'material-ui/IconButton';
    7.  import FontIcon from 'material-ui/FontIcon';
    9.  const HomePage = ({
    10.    userId,
    11.    onSubmitUserId,
    12.    onChangeUserId,
    13.  }) => (
    14.    <div>
    15.      <TextField
    16.        hintText="Please Key in your Github User Id."
    17.        onChange={onChangeUserId}
    18.      />
    19.      <Link to={{ 
    20.        pathname: '/result',
    21.        query: { userId: userId }
    22.      }}>
    23.        <RaisedButton label="Submit" onClick={onSubmitUserId(userId)} primary />
    24.      </Link>
    25.    </div>
    26.  );
    28.  export default HomePage;

    以下是 src/components/ResultPage/ResultPage.js，將 userId 當作 props 傳給 <GithubBox />： 

  1. ```javascript
  2. import React from 'react';
  3. import GithubBox from '../../components/GithubBox';
  5. const ResultPage = (props) => (
  6.   <div> 
  7.     <GithubBox data={props.data} userId={props.location.query.userId} />  
  8.   </div>
  9. );
  11. export default ResultPage;
  12. ```
  14. 以下是 `src/components/GithubBox/GithubBox.js`，負責擷取的 Github 資料呈現：
  16. ```javascript
  17. import React from 'react';
  18. import { Link } from 'react-router';
  19. // 引入 material-ui 的卡片式元件
  20. import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
  21. // 引入 material-ui 的 RaisedButton
  22. import RaisedButton from 'material-ui/RaisedButton';
  23. // 引入 ActionHome icon
  24. import ActionHome from 'material-ui/svg-icons/action/home';
  26. const GithubBox = (props) => (
  27.   <div>
  28.     <Card>
  29.       <CardHeader
  30.         title={props.data.get('name')}
  31.         subtitle={props.userId}
  32.         avatar={props.data.get('avatar_url')}
  33.       />
  34.       <CardText>
  35.         Followers : {props.data.get('followers')}
  36.       </CardText>      
  37.       <CardText>
  38.         Following : {props.data.get('following')}
  39.       </CardText>
  40.       <CardActions>
  41.         <Link to="/">
  42.           <RaisedButton 
  43.             label="Back" 
  44.             icon={<ActionHome />}
  45.             secondary={true} 
  46.           />
  47.         </Link>
  48.       </CardActions>
  49.     </Card> 
  50.   </div>
  51. );
  53. export default GithubBox;
  54. ```

  1. Connect State to Component

    最後，我們要將 Container 和 Component 連接在一起（若忘記了，請先回去複習 Container 與 Presentational Components 入門！）。以下是 src/containers/HomePage/HomePage.js，負責將 userId 和使用到的事件處理方法用 props 傳進 component ：

    1.  import { connect } from 'react-redux';
    2.  import HomePage from '../../components/HomePage';
    4.  import {
    5.    getGithub,
    6.    changeUserId,
    7.  } from '../../actions';
    9.  export default connect(
    10.    (state) => ({
    11.      userId: state.getIn(['github', 'userId']),
    12.    }),
    13.    (dispatch) => ({
    14.      onChangeUserId: (event) => (
    15.        dispatch(changeUserId(event.target.value))
    16.      ),
    17.      onSubmitUserId: (userId) => () => (
    18.        dispatch(getGithub(userId))
    19.      ),
    20.    }),
    21.    (stateProps, dispatchProps, ownProps) => {
    22.      const { userId } = stateProps;
    23.      const { onSubmitUserId } = dispatchProps;
    24.      return Object.assign({}, stateProps, dispatchProps, ownProps, {
    25.        onSubmitUserId: onSubmitUserId(userId),
    26.      });
    27.    }
    28.  )(HomePage);

    以下是 src/containers/ResultPage/ResultPage.js：

    1.  import { connect } from 'react-redux';
    2.  import ResultPage from '../../components/ResultPage';
    4.  export default connect(
    5.    (state) => ({
    6.      data: state.getIn(['github', 'data'])    
    7.    }),
    8.    (dispatch) => ({})
    9.  )(ResultPage);

  2. That’s it

    若一切順利的話，這時候你可以在終端機下 $ npm start 指令，然後在 http://localhost:8008 就可以看到你的努力成果囉！

    React Redux

總結

本章帶領讀者們從零開始整合 React + Redux + ImmutableJS + React Router 搭配 Github API 製作一個簡單的 Github 使用者查詢應用。下一章我們將挑戰進階應用，學習 Server Side Rendering 方面的知識，並用 React + Redux + Node（Isomorphic）開發一個食譜分享網站。

延伸閱讀

  1. Tutorial: build a weather app with React
  2. OpenWeatherMap
  3. Weather Icons
  4. Weather API Icons
  5. Material UI
  6. 【翻译】这个API很“迷人”——(新的Fetch API)
  7. Redux: trigger async data fetch on React view event
  8. Github API
  9. 传统 Ajax 已死，Fetch 永生

| 勘誤、提問或許願 |