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

太好了!這樣我們就完成了開發環境的設定可以開始動手實作 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';
    11. // 引入 react-tap-event-plugin 避免 material-ui onTouchTap event 會遇到的問題
    12. // Needed for onTouchTap
    13. // http://stackoverflow.com/a/34015469/988941
    14. injectTapEventPlugin();
    15. // 用 react-redux 的 Provider 包起來將 store 傳遞下去,讓每個 components 都可以存取到 state
    16. // 這邊使用 browserHistory 當做 history,並使用 material-ui 的 MuiThemeProvider 包裹整個 components
    17. // 由於這邊是簡易的 App 我們設計了 Main 為母模版,其有兩個子元件 HomePageContainer 和 ResultPageContainer,其中 HomePageContainer 為根位置的子元件
    18. ReactDOM.render(
    19. <Provider store={store}>
    20. <MuiThemeProvider>
    21. <Router history={browserHistory}>
    22. <Route path="/" component={Main}>
    23. <IndexRoute component={HomePageContainer} />
    24. <Route path="/result" component={ResultPageContainer} />
    25. </Route>
    26. </Router>
    27. </MuiThemeProvider>
    28. </Provider>,
    29. document.getElementById('app')
    30. );
  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';
    10. // 引入 uiActions 的 action
    11. import {
    12. showSpinner,
    13. hideSpinner,
    14. } from './uiActions';
    15. // 這邊是這個範例的重點,要學習我們之前尚未講解的非同步 action 處理方式:不同於一般同步 action 直接發送 action,非同步 action 會回傳一個帶有 dispatch 參數的 function,裡面使用了 Ajax(這裡使用 fetch())進行處理
    16. // 一般和 API 互動的流程:INIT(開始請求/秀出 spinner)-> COMPLETE(完成請求/隱藏 spinner)-> ERROR(請求失敗)
    17. // 這次我們雖然沒有使用 redux-actions 但我們還是維持標準 Flux Standard Action 格式:{ type: '', payload: {} }
    18. export const getGithub = (userId = 'torvalds') => {
    19. return (dispatch) => {
    20. dispatch({ type: GET_GITHUB_INITIATE });
    21. dispatch(showSpinner());
    22. fetch('https://api.github.com/users/' + userId)
    23. .then(function(response) { return response.json() })
    24. .then(function(json) {
    25. dispatch({ type: GET_GITHUB_SUCCESS, payload: { data: json } });
    26. dispatch(hideSpinner());
    27. })
    28. .catch(function(response) { dispatch({ type: GET_GITHUB_FAIL }) });
    29. }
    30. }
    31. // 同步 actions 處理,回傳 action 物件
    32. 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';
    6. // 同步 actions 處理,回傳 action 物件
    7. export const showSpinner = () => ({ type: SHOW_SPINNER});
    8. 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';
    2. export const UiState = Immutable.fromJS({
    3. spinnerVisible: false,
    4. });
    5. // 我們使用 userId 來暫存使用者 ID,data 存放 Ajax 取回的資料
    6. export const GithubState = Immutable.fromJS({
    7. userId: '',
    8. data: {},
    9. });

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

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

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

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

    將 reduces 使用 redux-immutablecombineReducers 在一起。以下是 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';
    4. const rootReducer = combineReducers({
    5. ui,
    6. github,
    7. });
    8. export default rootReducer;

    運用 redux 提供的 createStore API 把 rootReducerinitialStatemiddlewares 整合後創建出 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';
    6. const initialState = Immutable.Map();
    7. export default createStore(
    8. rootReducer,
    9. initialState,
    10. applyMiddleware(reduxThunk, createLogger({ stateTransformer: state => state.toJS() }))
    11. );
  4. Build Component

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

    1. import React from 'react';
    2. // 引入 AppBar
    3. import AppBar from 'material-ui/AppBar';
    4. const Main = (props) => (
    5. <div>
    6. <AppBar
    7. title="Github Finder"
    8. showMenuIconButton={false}
    9. />
    10. <div>
    11. {props.children}
    12. </div>
    13. </div>
    14. );
    15. // 進行 propTypes 驗證
    16. Main.propTypes = {
    17. children: React.PropTypes.object,
    18. };
    19. 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';
    8. const HomePage = ({
    9. userId,
    10. onSubmitUserId,
    11. onChangeUserId,
    12. }) => (
    13. <div>
    14. <TextField
    15. hintText="Please Key in your Github User Id."
    16. onChange={onChangeUserId}
    17. />
    18. <Link to={{
    19. pathname: '/result',
    20. query: { userId: userId }
    21. }}>
    22. <RaisedButton label="Submit" onClick={onSubmitUserId(userId)} primary />
    23. </Link>
    24. </div>
    25. );
    26. export default HomePage;

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

  1. ```javascript
  2. import React from 'react';
  3. import GithubBox from '../../components/GithubBox';
  4. const ResultPage = (props) => (
  5. <div>
  6. <GithubBox data={props.data} userId={props.location.query.userId} />
  7. </div>
  8. );
  9. export default ResultPage;
  10. ```
  11. 以下是 `src/components/GithubBox/GithubBox.js`,負責擷取的 Github 資料呈現:
  12. ```javascript
  13. import React from 'react';
  14. import { Link } from 'react-router';
  15. // 引入 material-ui 的卡片式元件
  16. import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
  17. // 引入 material-ui 的 RaisedButton
  18. import RaisedButton from 'material-ui/RaisedButton';
  19. // 引入 ActionHome icon
  20. import ActionHome from 'material-ui/svg-icons/action/home';
  21. const GithubBox = (props) => (
  22. <div>
  23. <Card>
  24. <CardHeader
  25. title={props.data.get('name')}
  26. subtitle={props.userId}
  27. avatar={props.data.get('avatar_url')}
  28. />
  29. <CardText>
  30. Followers : {props.data.get('followers')}
  31. </CardText>
  32. <CardText>
  33. Following : {props.data.get('following')}
  34. </CardText>
  35. <CardActions>
  36. <Link to="/">
  37. <RaisedButton
  38. label="Back"
  39. icon={<ActionHome />}
  40. secondary={true}
  41. />
  42. </Link>
  43. </CardActions>
  44. </Card>
  45. </div>
  46. );
  47. export default GithubBox;
  48. ```
  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';
    3. import {
    4. getGithub,
    5. changeUserId,
    6. } from '../../actions';
    7. export default connect(
    8. (state) => ({
    9. userId: state.getIn(['github', 'userId']),
    10. }),
    11. (dispatch) => ({
    12. onChangeUserId: (event) => (
    13. dispatch(changeUserId(event.target.value))
    14. ),
    15. onSubmitUserId: (userId) => () => (
    16. dispatch(getGithub(userId))
    17. ),
    18. }),
    19. (stateProps, dispatchProps, ownProps) => {
    20. const { userId } = stateProps;
    21. const { onSubmitUserId } = dispatchProps;
    22. return Object.assign({}, stateProps, dispatchProps, ownProps, {
    23. onSubmitUserId: onSubmitUserId(userId),
    24. });
    25. }
    26. )(HomePage);

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

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

| 勘誤、提問或許願 |