用 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 永生

| 勘误、提问或许愿 |