用 React + Redux + Node（Isomorphic JavaScript）开发食谱分享网站

前言

如果你是从一开始跟着我们踏出 React 旅程的读者真的恭喜你，也谢谢你一路跟着我们的学习脚步，对一个初学者来说这一段路并不容易。本章是扣除附录外我们最后一个正式章节的范例，也是规模最大的一个，在这个章节中我们要整合过去所学和添加一些知识开发一个可以登入会员并分享食谱的社群网站，Les’s GO！

需求规划

让使用者可以登入会员并分享食谱的社群网站

功能规划

  1. React Router / Redux / Immutable / Server Render / Async API
  2. 使用者登入/登出（JSON Web Token）
  3. CRUD 表单资料处理
  4. 资料库串接(ORM/MongoDB)

使用技术

  1. React
  2. Redux(redux-actions/redux-promise/redux-immutable)
  3. React Router
  4. ImmutableJS
  5. Node MongoDB ORM(Mongoose)
  6. JSON Web Token
  7. React Bootstrap
  8. Axios(Promise)
  9. Webpack
  10. UUID

专案成果截图

用 React + Redux + Node（Isomorphic）开发一个食谱分享网站

用 React + Redux + Node（Isomorphic）开发一个食谱分享网站

用 React + Redux + Node（Isomorphic）开发一个食谱分享网站

用 React + Redux + Node（Isomorphic）开发一个食谱分享网站

环境安装与设定

  1. 安装 Node 和 NPM

  2. 安装所需套件

  1. $ npm install --save react react-dom redux react-redux react-router immutable redux-immutable redux-actions redux-promise bcrypt body-parser cookie-parser debug express immutable jsonwebtoken mongoose morgan passport passport-local react-router-bootstrap axios serve-favicon validator uuid
  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.  import webpack from 'webpack';
    3.  module.exports = {
    4.    entry: [
    5.      './src/client/index.js',
    6.    ],
    7.    output: {
    8.      path: `${__dirname}/dist`,
    9.      filename: 'bundle.js',
    10.      publicPath: '/static/'
    11.    },
    12.    module: {
    13.      preLoaders: [
    14.        {
    15.          test: /\.jsx$|\.js$/,
    16.          loader: 'eslint-loader',
    17.          include: `${__dirname}/app`,
    18.          exclude: /bundle\.js$/,
    19.        },
    20.      ],
    21.      // 使用 Hot Module Replacement 外挂
    22.      plugins: [
    23.        new webpack.optimize.OccurrenceOrderPlugin(),
    24.        new webpack.HotModuleReplacementPlugin()
    25.      ],    
    26.      loaders: [{
    27.        test: /\.js$/,
    28.        exclude: /node_modules/,
    29.        loader: 'babel-loader',
    30.        query: {
    31.          presets: ['es2015', 'react'],
    32.        },
    33.      }],
    34.    },
    35.  };

  4. 设定 src/server/config/index.js：

  1. export default ({
  2.   "secret": "ilovecooking",
  3.     "database": "mongodb://localhost/open_cook"
  4. });

太好了！这样我们就完成了开发环境的设定可以开始动手实作我们的食谱分享社群应用程式了！

同时我们也初步设计我们资料夹结构，主要我们将资料夹分为 client、common、server：

用 React + Redux + Node（Isomorphic）开发一个食谱分享网站

动手实作

首先我们先进行 src/client/index.js 的设计：

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Provider } from 'react-redux';
  4. import { browserHistory, Router } from 'react-router';
  5. import { fromJS } from 'immutable';
  6. // 我们的 routing 放置在 common 资料夹中的 routes
  7. import routes from '../common/routes';
  8. import configureStore from '../common/store/configureStore';
  9. import { checkAuth } from '../common/actions';
  11. // 将 server side 传过来的 initialState 给 rehydration（覆水）
  12. const initialState = window.__PRELOADED_STATE__;
  14. // 将 initialState 传给 configureStore 函数创建出 store 并传给 Provider
  15. const store = configureStore(fromJS(initialState));
  16. ReactDOM.render(
  17.   <Provider store={store}>
  18.     <Router history={browserHistory} routes={routes} />
  19.   </Provider>,
  20.   document.getElementById('app')
  21. );

由于 Node 端要到新版对于 ES6 支援较好，所以先用 babel-register 在 src/server/index.js 去即时转译 server.js，但不建议在 production 环境使用。

  1. // use babel-register to precompile ES6 
  2. require('babel-register');
  3. require('./server');
  1. // 引入 Express、mongoose（MongoDB ORM）以及相关 server 上使用的套件
  2. /* Server Packages */
  3. import Express from 'express';
  4. import bodyParser from 'body-parser';
  5. import cookieParser from 'cookie-parser';
  6. import morgan from 'morgan';
  7. import mongoose from 'mongoose';
  8. import config from './config';
  9. // 引入后端 model 透过 model 和资料库互动 
  10. import User from './models/user';
  11. import Recipe from './models/recipe';
  13. // 引入 webpackDevMiddleware 当做前端 server middleware
  14. /* Client Packages */
  15. import webpack from 'webpack';
  16. import React from 'react';
  17. import webpackDevMiddleware from 'webpack-dev-middleware';
  18. import webpackHotMiddleware from 'webpack-hot-middleware';
  19. import { RouterContext, match } from 'react-router';
  20. import { renderToString } from 'react-dom/server';
  21. import { Provider } from 'react-redux';
  22. import Immutable, { fromJS } from 'immutable';
  23. /* Common Packages */
  24. import webpackConfig from '../../webpack.config';
  25. import routes from '../common/routes';
  26. import configureStore from '../common/store/configureStore';
  27. import fetchComponentData from '../common/utils/fetchComponentData';
  28. import apiRoutes from './controllers/api.js';
  29. /* config */
  30. // 初始化 Express server
  31. const app = new Express();
  32. const port = process.env.PORT || 3000;
  33. // 连接到资料库，相关设定档案放在 config.database
  34. mongoose.connect(config.database); // connect to database
  35. app.set('env', 'production');
  36. // 设定静态档案位置
  37. app.use('/static', Express.static(__dirname + '/public'));
  38. app.use(cookieParser());
  39. // use body parser so we can get info from POST and/or URL parameters
  40. app.use(bodyParser.urlencoded({ extended: false })); // only can deal with key/value
  41. app.use(bodyParser.json());
  42. // use morgan to log requests to the console
  43. app.use(morgan('dev'));
  45. // 负责每次接受到 request 的处理函数，判断该如何处理和取得 initialState 整理后结合伺服器渲染页面传往前端
  46. const handleRender = (req, res) => {
  47.   // Query our mock API asynchronously
  48.   match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
  49.     if (error) {
  50.       res.status(500).send(error.message);
  51.     } else if (redirectLocation) {
  52.       res.redirect(302, redirectLocation.pathname + redirectLocation.search);
  53.     } else if (renderProps == null) {
  54.       res.status(404).send('Not found');
  55.     }
  56.     fetchComponentData(req.cookies.token).then((response) => {
  57.       let isAuthorized = false;
  58.       if (response[1].data.success === true) {
  59.          isAuthorized = true;
  60.       } else {
  61.         isAuthorized = false;        
  62.       }
  63.       const initialState = fromJS({
  64.         recipe: {
  65.           recipes: response[0].data,
  66.           recipe: {
  67.             id: '',
  68.             name: '', 
  69.             description: '', 
  70.             imagePath: '',            
  71.           }  
  72.         },
  73.         user: {
  74.           isAuthorized: isAuthorized,
  75.           isEdit: false,
  76.         }
  77.       });
  78.       // server side 渲染页面
  79.       // Create a new Redux store instance
  80.       const store = configureStore(initialState);
  81.       const initView = renderToString(
  82.         <Provider store={store}>
  83.           <RouterContext {...renderProps} />
  84.         </Provider>
  85.       );
  86.       let state = store.getState();
  87.       let page = renderFullPage(initView, state);
  88.       return res.status(200).send(page);
  89.     })
  90.     .catch(err => res.end(err.message));
  91.   })
  92. }
  94. // 基础页面 HTML 设计
  95. const renderFullPage = (html, preloadedState) => (`
  96.     <!doctype html>
  97.     <html>
  98.       <head>
  99.         <title>OpenCook 分享料理的美好时光</title>
  100.         <!-- Latest compiled and minified CSS -->
  101.         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
  102.         <!-- Optional theme -->
  103.         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
  104.         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.7/journal/bootstrap.min.css">
  105.       <body>
  106.         <div id="app">${html}</div>
  107.         <script>
  108.           window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\x3c')}
  109.         </script>
  110.         <script src="/static/bundle.js"></script>
  111.       </body>
  112.     </html>`
  113. );
  115. // 设定 hot reload middleware
  116. const compiler = webpack(webpackConfig);
  117. app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
  118. app.use(webpackHotMiddleware(compiler));
  120. // 设计 API prefix，并使用 controller 中的 apiRoutes 进行处理
  121. app.use('/api', apiRoutes);  
  122. // 使用伺服器端 handleRender 
  123. app.use(handleRender);
  124. app.listen(port, (error) => {
  125.   if (error) {
  126.     console.error(error)
  127.   } else {
  128.     console.info(`==> ?  Listening on port ${port}. Open up http://localhost:${port}/ in your browser.`)
  129.   }
  130. });

由于 Node 端要到新版对于 ES6 支援较好，所以先用 babel-register 在 src/server/index.js 去即时转译 server.js，但目前不建议在 production 环境使用。

  1. // use babel-register to precompile ES6 syntax
  2. require('babel-register');
  3. require('./server');

现在我们来设计一下我们资料库的 Schema，在这边我们使用 MongoDB 的 ORM Mongoose，可以方便我们使用物件方式进行资料库的操作：

  1. // 引入 mongoose 和 Schema
  2. import mongoose, { Schema } from 'mongoose';
  4. // 使用 mongoose.model 建立新的资料表，并将 Schema 传入
  5. // 这边我们设计了食谱分享的一些基本要素，包括名称、描述、照片位置等
  6. export default mongoose.model('Recipe', new Schema({ 
  7.     id: String,
  8.     name: String, 
  9.     description: String, 
  10.     imagePath: String,
  11.     steps: Array,
  12.     updatedAt: Date,
  13. }));
  1. // 引入 mongoose 和 Schema
  2. import mongoose, { Schema } from 'mongoose';
  4. // 使用 mongoose.model 建立新的资料表，并将 Schema 传入
  5. // 这边我们设计了使用者的一些基本要素，包括名称、描述、照片位置等
  6. export default mongoose.model('User', new Schema({ 
  7.     id: Number,
  8.     username: String, 
  9.     email: String,
  10.     password: String, 
  11.     admin: Boolean 
  12. }));

为了方便维护，我们把 API 的部份统一在 src/server/controllers/api.js 进行管理，这部份会涉及比较多 Node 和 mongoose 的操作，若读者尚不熟悉可以参考 mongoose 官网

  1. import Express from 'express';
  2. // 引入 jsonwebtoken 套件 
  3. import jwt from 'jsonwebtoken';
  4. // 引入 User、Recipe Model 方便进行资料库操作
  5. import User from '../models/user';
  6. import Recipe from '../models/recipe';
  7. import config from '../config';
  9. // API Route
  10. const app = new Express();
  11. const apiRoutes = Express.Router();
  12. // 设定 JSON Web Token 的 secret variable
  13. app.set('superSecret', config.secret); // secret variable
  14. // 使用者登入 API ，依据使用 email 和 密码去验证，若成功则回传一个认证 token（时效24小时）我们把它存在 cookie 中，方便前后端存取。这边我们先不考虑太多资讯安全的议题
  15. apiRoutes.post('/login', function(req, res) {
  16.   // find the user
  17.   User.findOne({
  18.     email: req.body.email
  19.   }, (err, user) => {
  20.     if (err) throw err;
  21.     if (!user) {
  22.       res.json({ success: false, message: 'Authentication failed. User not found.' });
  23.     } else if (user) {
  24.       // check if password matches
  25.       if (user.password != req.body.password) {
  26.         res.json({ success: false, message: 'Authentication failed. Wrong password.' });
  27.       } else {
  28.         // if user is found and password is right
  29.         // create a token
  30.         const token = jwt.sign({ email: user.email }, app.get('superSecret'), {
  31.           expiresIn: 60 * 60 * 24 // expires in 24 hours
  32.         });
  33.         // return the information including token as JSON
  34.         // 若登入成功回传一个 json 讯息
  35.         res.json({
  36.           success: true,
  37.           message: 'Enjoy your token!',
  38.           token: token,
  39.           userId: user._id
  40.         });
  41.       }   
  42.     }
  43.   });
  44. });
  45. // 初始化 api，一开始资料库尚未建立任何使用者，我们需要在浏览器输入 `http://localhost:3000/api/setup`，进行资料库初始化。这个动作将新增一个使用者、一份食谱，若是成功新增将回传一个 success 讯息
  46. apiRoutes.get('/setup', (req, res) => {
  47.   // create a sample user
  48.   const sampleUser = new User({ 
  49.     username: 'mark', 
  50.     email: 'mark@demo.com', 
  51.     password: '123456',
  52.     admin: true 
  53.   });
  54.   const sampleRecipe = new Recipe({
  55.     id: '110ec58a-a0f2-4ac4-8393-c866d813b8d1',
  56.     name: '番茄炒蛋', 
  57.     description: '番茄炒蛋，一道非常经典的家常菜料理。虽然看似普通，但每个家庭都有属于自己家里的不同味道', 
  58.     imagePath: 'https://c1.staticflickr.com/6/5011/5510599760_6668df5a8a_z.jpg',
  59.     steps: ['放入番茄', '打个蛋', '放入少许盐巴', '用心快炒'],
  60.     updatedAt: new Date()
  61.   });
  62.   // save the sample user
  63.   sampleUser.save((err) => {
  64.     if (err) throw err;
  65.     sampleRecipe.save((err) => {
  66.       if (err) throw err;
  67.       console.log('User saved successfully');
  68.       res.json({ success: true });      
  69.     })
  70.   });
  71. });
  72. // 回传所有 recipes
  73. apiRoutes.get('/recipes', (req, res) => {
  74.   Recipe.find({}, (err, recipes) => {
  75.     res.status(200).json(recipes);
  76.   })
  77. });
  79. // route middleware to verify a token
  80. // 接下来的 api 将进行控管，也就是说必须在网址请求中夹带认证 token 才能完成请求
  81. apiRoutes.use((req, res, next) => {
  82.   // check header or url parameters or post parameters for token
  83.   // 确认标头、网址或 post 参数是否含有 token，本范例因为简便使用网址 query 参数 
  84.   var token = req.body.token || req.query.token || req.headers['x-access-token'];
  85.   // decode token
  86.   if (token) {
  87.     // verifies secret and checks exp
  88.     jwt.verify(token, app.get('superSecret'), (err, decoded) => {      
  89.       if (err) {
  90.         return res.json({ success: false, message: 'Failed to authenticate token.' });    
  91.       } else {
  92.         // if everything is good, save to request for use in other routes
  93.         req.decoded = decoded;    
  94.         next();
  95.       }
  96.     });
  97.   } else {
  98.     // if there is no token
  99.     // return an error
  100.     return res.status(403).send({ 
  101.         success: false, 
  102.         message: 'No token provided.' 
  103.     });
  104.   }
  105. });
  106. // 确认认证是否成功
  107. apiRoutes.get('/authenticate', (req, res) => {
  108.   res.json({
  109.     success: true,
  110.     message: 'Enjoy your token!',
  111.   });
  112. });
  113. // create recipe 新增食谱
  114. apiRoutes.post('/recipes', (req, res) => {
  115.   const newRecipe = new Recipe({
  116.     name: req.body.name, 
  117.     description: req.body.description, 
  118.     imagePath: req.body.imagePath,
  119.     steps: ['放入番茄', '打个蛋', '放入少许盐巴', '用心快炒'],
  120.     updatedAt: new Date()
  121.   });
  122.   newRecipe.save((err) => {
  123.     if (err) throw err;
  124.     console.log('User saved successfully');
  125.     res.json({ success: true });      
  126.   });
  127. }); 
  128. // update recipe 根据 _id（mongodb 的 id）更新食谱
  129. apiRoutes.put('/recipes/:id', (req, res) => {
  130.   Recipe.update({ _id: req.params.id }, {
  131.     name: req.body.name, 
  132.     description: req.body.description, 
  133.     imagePath: req.body.imagePath,
  134.     steps: ['放入番茄', '打个蛋', '放入少许盐巴', '用心快炒'],
  135.     updatedAt: new Date()
  136.   } ,(err) => {
  137.     if (err) throw err;
  138.     console.log('User updated successfully');
  139.     res.json({ success: true });      
  140.   });
  141. });
  142. // remove recipe 根据 _id 删除食谱，若成功回传成功讯息
  143. apiRoutes.delete('/recipes/:id', (req, res) => {
  144.   Recipe.remove({ _id: req.params.id }, (err, recipe) => {
  145.     if (err) throw err;
  146.     console.log('remove saved successfully');
  147.     res.json({ success: true }); 
  148.   });
  149. }); 
  150. export default apiRoutes;

设定整个 App 的 routing，我们主要页面有 HomePageContainer、LoginPageContainer、SharePageContainer，值得注意的是我们这边使用 Higher Order Components （Higher Order Components 为一个函数， 接收一个 Component 后在 Class Component 的 render 中 return 回传入的 components）方式去确认使用者是否有登入，若有没登入则不能进入分享食谱页面，反之若已登入也不会再进到登入页面：

  1. import React from 'react';
  2. import { Route, IndexRoute } from 'react-router';
  3. import Main from '../components/Main';
  4. import CheckAuth from '../components/CheckAuth';
  5. import HomePageContainer from '../containers/HomePageContainer';
  6. import LoginPageContainer from '../containers/LoginPageContainer';
  7. import SharePageContainer from '../containers/SharePageContainer';
  9. export default (
  10.   <Route path='/' component={Main}>
  11.     <IndexRoute component={HomePageContainer} />
  12.     <Route path="/login" component={CheckAuth(LoginPageContainer, 'guest')}/>
  13.     <Route path="/share" component={CheckAuth(SharePageContainer, 'auth')}/>
  14.   </Route>
  15. );

设定行为常数（src/constants/actionTypes.js）：

  1. export const AUTH_START    = "AUTH_START";
  2. export const AUTH_COMPLETE = "AUTH_COMPLETE";
  3. export const AUTH_ERROR    = "AUTH_ERROR";
  4. export const START_LOGOUT    = "START_LOGOUT";
  5. export const CHECK_AUTH    = "CHECK_AUTH";
  6. export const SET_USER    = "SET_USER";
  7. export const SHOW_SPINNER    = "SHOW_SPINNER";
  8. export const HIDE_SPINNER    = "HIDE_SPINNER";
  9. export const SET_UI    = "SET_UI";
  10. export const GET_RECIPES = 'GET_RECIPES';
  11. export const SET_RECIPE = 'SET_RECIPE';
  12. export const ADD_RECIPE = 'ADD_RECIPE';
  13. export const UPDATE_RECIPE = 'UPDATE_RECIPE';
  14. export const DELETE_RECIPE = 'DELETE_RECIPE';

设定 src/actions/recipeActions.js，我们这边使用 redux-promise，可以很容易使用非同步的行为 WebAPI： 

  1. import { createAction } from 'redux-actions';
  2. import WebAPI from '../utils/WebAPI';
  4. import {
  5.   GET_RECIPES,
  6.   ADD_RECIPE,
  7.   UPDATE_RECIPE,
  8.   DELETE_RECIPE,
  9.   SET_RECIPE,
  10. } from '../constants/actionTypes';
  12. export const getRecipes = createAction('GET_RECIPES', WebAPI.getRecipes);
  13. export const addRecipe = createAction('ADD_RECIPE', WebAPI.addRecipe);
  14. export const updateRecipe = createAction('UPDATE_RECIPE', WebAPI.updateRecipe);
  15. export const deleteRecipe = createAction('DELETE_RECIPE', WebAPI.deleteRecipe);
  16. export const setRecipe = createAction('SET_RECIPE');

设定 src/actions/uiActions.js：

  1. import { createAction } from 'redux-actions';
  2. import WebAPI from '../utils/WebAPI';
  4. import {
  5.   SHOW_SPINNER,
  6.   HIDE_SPINNER,
  7.   SET_UI,
  8. } from '../constants/actionTypes';
  10. export const showSpinner = createAction('SHOW_SPINNER');
  11. export const hideSpinner = createAction('HIDE_SPINNER');
  12. export const setUi = createAction('SET_UI');

设定 src/actions/userActions.js，处理使用者登入登出等行为：

  1. import { createAction } from 'redux-actions';
  2. import WebAPI from '../utils/WebAPI';
  4. import {
  5.   AUTH_START,
  6.   AUTH_COMPLETE,
  7.   AUTH_ERROR,
  8.   START_LOGOUT,
  9.   CHECK_AUTH,
  10.   SET_USER
  11. } from '../constants/actionTypes';
  13. export const authStart = createAction('AUTH_START', WebAPI.login);
  14. export const authComplete = createAction('AUTH_COMPLETE');
  15. export const authError = createAction('AUTH_ERROR');
  16. export const startLogout = createAction('START_LOGOUT', WebAPI.logout);
  17. export const checkAuth = createAction('CHECK_AUTH');
  18. export const setUser = createAction('SET_USER');

于 scr/actions/index.js 输出 actions：

  1. export * from './userActions';
  2. export * from './recipeActions';
  3. export * from './uiActions';

于 scr/common/utils/fetchComponentData.js 设定 server side 初始 fetchComponentData：

  1. // 这边使用 axios 方便进行 promises base request
  2. import axios from 'axios';
  3. // 记得附加上我们存在 cookies 的 token  
  4. export default function fetchComponentData(token = 'token') {
  5.   const promises = [axios.get('http://localhost:3000/api/recipes'), axios.get('http://localhost:3000/api/authenticate?token=' + token)];
  6.   return Promise.all(promises);
  7. }

于 scr/common/utils/WebAPI.js 所有前端 API 的处理：

  1. import axios from 'axios';
  2. import { browserHistory } from 'react-router';
  3. // 引入 uuid 当做食谱 id
  4. import uuid from 'uuid';
  6. import { 
  7.   authComplete,
  8.   authError,
  9.   hideSpinner,
  10.   completeLogout,
  11. } from '../actions';
  13. // getCookie 函数传入 key 回传 value
  14. function getCookie(keyName) {
  15.   var name = keyName + '=';
  16.   const cookies = document.cookie.split(';');
  17.   for(let i = 0; i < cookies.length; i++) {
  18.       let cookie = cookies[i];
  19.       while (cookie.charAt(0)==' ') {
  20.           cookie = cookie.substring(1);
  21.       }
  22.       if (cookie.indexOf(name) == 0) {
  23.         return cookie.substring(name.length, cookie.length);
  24.       }
  25.   }
  26.   return "";
  27. }
  29. export default {
  30.   // 呼叫后端登入 api
  31.   login: (dispatch, email, password) => {
  32.     axios.post('/api/login', {
  33.       email: email,
  34.       password: password
  35.     })
  36.     .then((response) => {
  37.       if(response.data.success === false) {
  38.         dispatch(authError()); 
  39.         dispatch(hideSpinner());  
  40.         alert('发生错误，请再试一次！');
  41.         window.location.reload();        
  42.       } else {
  43.         if (!document.cookie.token) {
  44.           let d = new Date();
  45.           d.setTime(d.getTime() + (24 * 60 * 60 * 1000));
  46.           const expires = 'expires=' + d.toUTCString();
  47.           document.cookie = 'token=' + response.data.token + '; ' + expires;
  48.           dispatch(authComplete());
  49.           dispatch(hideSpinner());  
  50.           browserHistory.push('/'); 
  51.         }
  52.       }
  53.     })
  54.     .catch(function (error) {
  55.       dispatch(authError());
  56.     });
  57.   },
  58.   // 呼叫后端登出 api  
  59.   logout: (dispatch) => {
  60.     document.cookie = 'token=; ' + 'expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  61.     dispatch(hideSpinner());  
  62.     browserHistory.push('/'); 
  63.   },
  64.   // 确认使用者是否登入    
  65.   checkAuth: (dispatch, token) => {
  66.     axios.post('/api/authenticate', {
  67.       token: token,
  68.     })
  69.     .then((response) => {
  70.       if(response.data.success === false) {
  71.         dispatch(authError()); 
  72.       } else {
  73.         dispatch(authComplete());
  74.       }
  75.     })
  76.     .catch(function (error) {
  77.       dispatch(authError());
  78.     });
  79.   },
  80.   // 取得目前所有食谱    
  81.   getRecipes: () => {
  82.     axios.get('/api/recipes')
  83.     .then((response) => {
  84.     })
  85.     .catch((error) => {
  86.     });
  87.   },
  88.   // 呼叫新增食谱 api，记得附加上我们存在 cookies 的 token  
  89.   addRecipe: (dispatch, name, description, imagePath) => {
  90.     const id = uuid.v4();
  91.     axios.post('/api/recipes?token=' + getCookie('token'), {
  92.       id: id,
  93.       name: name,
  94.       description: description,
  95.       imagePath: imagePath,
  96.     })
  97.     .then((response) => {
  98.       if(response.data.success === false) {
  99.         dispatch(hideSpinner());  
  100.         alert('发生错误，请再试一次！');
  101.         browserHistory.push('/share');         
  102.       } else {
  103.         dispatch(hideSpinner());  
  104.         window.location.reload();        
  105.         browserHistory.push('/'); 
  106.       }
  107.     })
  108.     .catch(function (error) {
  109.     });
  110.   },
  111.   // 呼叫更新食谱 api，记得附加上我们存在 cookies 的 token  
  112.   updateRecipe: (dispatch, recipeId, name, description, imagePath) => {
  113.     axios.put('/api/recipes/' + recipeId + '?token=' + getCookie('token'), {
  114.       id: recipeId,
  115.       name: name,
  116.       description: description,
  117.       imagePath: imagePath,
  118.     })
  119.     .then((response) => {
  120.       if(response.data.success === false) {
  121.         dispatch(hideSpinner());  
  122.         dispatch(setRecipe({ key: 'recipeId', value: '' }));
  123.         dispatch(setUi({ key: 'isEdit', value: false }));
  124.         alert('发生错误，请再试一次！');
  125.         browserHistory.push('/share');         
  126.       } else {
  127.         dispatch(hideSpinner());  
  128.         window.location.reload();        
  129.         browserHistory.push('/'); 
  130.       }
  131.     })
  132.     .catch(function (error) {
  133.     });
  134.   },
  135.   // 呼叫删除食谱 api，记得附加上我们存在 cookies 的 token  
  136.   deleteRecipe: (dispatch, recipeId) => {
  137.     axios.delete('/api/recipes/' + recipeId + '?token=' + getCookie('token'))
  138.     .then((response) => {
  139.       if(response.data.success === false) {
  140.         dispatch(hideSpinner());  
  141.         alert('发生错误，请再试一次！');
  142.         browserHistory.push('/');         
  143.       } else {
  144.         dispatch(hideSpinner());  
  145.         window.location.reload();        
  146.         browserHistory.push('/'); 
  147.       }
  148.     })
  149.     .catch(function (error) {
  150.     });    
  151.   } 
  152. };

接下来设定我们的 reducers，以下是 src/common/reducers/data/recipeReducers.js，GET_RECIPES 负责将后端 API 取得的所有食谱存放在 recipes 中：

  1. import { handleActions } from 'redux-actions';
  2. import { RecipeState } from '../../constants/models';
  4. import {
  5.   GET_RECIPES,
  6.   SET_RECIPE,
  7. } from '../../constants/actionTypes';
  9. const recipeReducers = handleActions({
  10.   GET_RECIPES: (state, { payload }) => (
  11.     state.set(
  12.       'recipes',
  13.       payload.recipes
  14.     )
  15.   ),
  16.   SET_RECIPE: (state, { payload }) => (
  17.     state.setIn(payload.keyPath, payload.value)
  18.   ),  
  19. }, RecipeState);
  21. export default recipeReducers;

以下是 src/common/reducers/data/userReducers.js，负责确认登入相关处理事项。注意的是由于登入是非同步执行，所以会有几个阶段的行为要做处理：

  1. import { handleActions } from 'redux-actions';
  2. import { UserState } from '../../constants/models';
  4. import {
  5.   AUTH_START,
  6.   AUTH_COMPLETE,
  7.   AUTH_ERROR,
  8.   LOGOUT_START,
  9.   SET_USER,
  10. } from '../../constants/actionTypes';
  12. const userReducers = handleActions({
  13.   AUTH_START: (state) => (
  14.     state.merge({
  15.       isAuthorized: false,      
  16.     })
  17.   ),  
  18.   AUTH_COMPLETE: (state) => (
  19.     state.merge({
  20.       email: '',
  21.       password: '',
  22.       isAuthorized: true,
  23.     })
  24.   ),  
  25.   AUTH_ERROR: (state) => (
  26.     state.merge({
  27.       username: '',
  28.       email: '',
  29.       password: '',
  30.       isAuthorized: false,
  31.     })
  32.   ),  
  33.   START_LOGOUT: (state) => (
  34.     state.merge({
  35.       isAuthorized: false,      
  36.     })
  37.   ), 
  38.   CHECK_AUTH: (state) => (
  39.     state.set('isAuthorized', true)
  40.   ),
  41.   SET_USER: (state, { payload }) => (
  42.     state.set(payload.key, payload.value)
  43.   ),
  44. }, UserState);
  46. export default userReducers;

以下是 src/common/reducers/ui/uiReducers.js，负责确认 UI State 相关处理：

  1. import { handleActions } from 'redux-actions';
  2. import { UiState } from '../../constants/models';
  4. import {
  5.   SHOW_SPINNER,
  6.   HIDE_SPINNER,
  7.   SET_UI,
  8. } from '../../constants/actionTypes';
  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.   SET_UI: (state, { payload }) => (
  24.     state.set(payload.key, payload.value)
  25.   ),    
  26. }, UiState);
  28. export default uiReducers;

最后把所有 recipes 在 src/common/reducers/index.js 使用 combineReducers 整合在一起，注意的是我们整个 App 的资料流要维持 immutable： 

  1. import { combineReducers } from 'redux-immutable';
  2. import ui from './ui/uiReducers';
  3. import recipe from './data/recipeReducers';
  4. import user from './data/userReducers';
  5. // import routes from './routes';
  7. const rootReducer = combineReducers({
  8.   ui,
  9.   recipe,
  10.   user,
  11. });
  13. export default rootReducer;

以下是 src/common/store/configureStore.js 处理 store 的建立，这次我们使用了 promiseMiddleware 的 middleware：

  1. import { createStore, applyMiddleware } from 'redux';
  2. import promiseMiddleware from 'redux-promise';
  3. import createLogger from 'redux-logger';
  4. import Immutable from 'immutable';
  5. import rootReducer from '../reducers';
  7. const initialState = Immutable.Map();
  9. export default function configureStore(preloadedState = initialState) {
  10.   const store = createStore(
  11.     rootReducer,
  12.     preloadedState,
  13.     applyMiddleware(createLogger({ stateTransformer: state => state.toJS() }, promiseMiddleware))
  14.   );
  16.   return store;
  17. }

经过一连串努力，我们来到了 View 的布建。在这个 App 中我们主要会由一个 AppBar 负责所有页面的导览，也就是每个页面都会有 AppBar 常驻在上面，然而上面的内容则会依 UI State 中的 isAuthorized 而有所不同。最后要留意的是我们使用了 React Bootstrapt 来建立 React Component。

  1. import React from 'react';
  2. import { LinkContainer } from 'react-router-bootstrap';
  3. import { Link } from 'react-router';
  4. import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
  6. const AppBar = ({
  7.   isAuthorized,
  8.   onToShare,
  9.   onLogout,
  10. }) => (
  11.   <Navbar>
  12.     <Navbar.Header>
  13.       <Navbar.Brand>
  14.         <Link to="/">OpenCook</Link>
  15.       </Navbar.Brand>
  16.       <Navbar.Toggle />
  17.     </Navbar.Header>
  18.     <Navbar.Collapse>
  19.       {
  20.         isAuthorized === false ?
  21.         (
  22.           <Nav pullRight>
  23.             <LinkContainer to={{ pathname: '/login' }}><NavItem eventKey={2} href="#">登入</NavItem></LinkContainer>
  24.           </Nav>
  25.         ) :
  26.         (
  27.           <Nav pullRight>
  28.             <NavItem eventKey={1} onClick={onToShare}>分享食谱</NavItem>
  29.             <NavItem eventKey={2} onClick={onLogout} href="#">登出</NavItem>
  30.           </Nav>
  31.         )        
  32.       }
  33.     </Navbar.Collapse>
  34.   </Navbar>
  35. );
  37. export default AppBar;

以下是 src/common/containers/AppBarContainer/AppBarContainer.js：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import AppBar from '../../components/AppBar';
  4. import { browserHistory } from 'react-router';
  6. import {
  7.   startLogout,
  8.   setRecipe,
  9.   setUi,
  10. } from '../../actions';
  12. export default connect(
  13.   (state) => ({
  14.     isAuthorized: state.getIn(['user', 'isAuthorized']),
  15.   }),
  16.   (dispatch) => ({
  17.     onToShare: () => {
  18.       dispatch(setRecipe({ key: 'recipeId', value: '' }));
  19.       dispatch(setUi({ key: 'isEdit', value: false }));
  20.       window.location.reload();        
  21.       browserHistory.push('/share'); 
  22.     },
  23.     onLogout: () => (
  24.       dispatch(startLogout(dispatch))
  25.     ),
  26.   })
  27. )(AppBar);

以下是 src/components/Main/Main.js，透过 route 机制让 AppBarContainer 可以成为整个 App 母模版：

  1. import React from 'react';
  2. import AppBarContainer from '../../containers/AppBarContainer';
  4. const Main = (props) => (
  5.   <div>
  6.     <AppBarContainer />
  7.     <div>
  8.       {props.children}
  9.     </div>
  10.   </div>
  11. );
  13. export default Main;

在 checkAuth 这个 Component 中，我们使用到了 Higher Order Components 的观念。Higher Order Components 为一个函数， 接收一个 Component 后在 Class Component 的 render 中 return 回传入的 components 方式去确认使用者是否有登入，若有没登入则不能进入分享食谱页面，反之若已登入也不会再进到登入页面：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import { withRouter } from 'react-router';
  5. // High Order Component
  6. export default function requireAuthentication(Component, type) {
  7.   class AuthenticatedComponent extends React.Component {
  8.     componentWillMount() {
  9.       this.checkAuth();
  10.     }
  11.     componentWillReceiveProps(nextProps) {
  12.       this.checkAuth();
  13.     }
  14.     checkAuth() {
  15.       if(type === 'auth') {
  16.         if (!this.props.isAuthorized) {
  17.           this.props.router.push('/');
  18.         }        
  19.       } else {
  20.         if (this.props.isAuthorized) {
  21.           this.props.router.push('/');
  22.         }                
  23.       }
  24.     }
  25.     render() {
  26.       return ( 
  27.         <div> 
  28.         {
  29.           (type === 'auth') ?
  30.           this.props.isAuthorized === true ? <Component {...this.props } /> : null
  31.           : this.props.isAuthorized === false ? <Component {...this.props } /> : null
  32.         } 
  33.         </div>
  34.       )
  35.     }
  36.   };
  37.   const mapStateToProps = (state) => ({
  38.     isAuthorized: state.getIn(['user', 'isAuthorized']),
  39.   });
  40.   return connect(mapStateToProps)(withRouter(AuthenticatedComponent));
  41. }

我们将每个食谱呈现设计成 RecipeBox，以下是在 src/common/components/HomePage/HomePage.js 使用 map 方法去迭代我们的食谱：

  1. import React from 'react';
  2. import RecipeBoxContainer from '../../containers/RecipeBoxContainer';
  4. const HomePage = ({
  5.   recipes
  6. }) => (
  7.   <div>        
  8.   {
  9.     recipes.map((recipe, index) => (
  10.       <RecipeBoxContainer recipe={recipe} key={index}  />
  11.     )).toJS()
  12.   }
  13.   </div>
  14. );
  16. export default HomePage;

以下是 src/common/containers/HomePageContainer/HomePageContainer.js：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import HomePage from '../../components/HomePage';
  5. export default connect(
  6.   (state) => ({
  7.     recipes: state.getIn(['recipe', 'recipes']),    
  8.   }),
  9.   (dispatch) => ({
  10.   })
  11. )(HomePage);

在 src/common/components/LoginBox/LoginBox.js 设计我们 LoginBox：

  1. import React from 'react';
  2. import { Form, FormGroup, Button, FormControl, ControlLabel } from 'react-bootstrap';
  4. const LoginBox = ({
  5.   email,
  6.   password,
  7.   onChangeEmailInput,
  8.   onChangePasswordInput,
  9.   onLoginSubmit
  10. }) => (
  11.   <div>
  12.     <Form horizontal>
  13.       <FormGroup
  14.         controlId="formBasicText"
  15.       >
  16.         <ControlLabel>请输入您的 Email</ControlLabel>
  17.         <FormControl
  18.           type="text"
  19.           onChange={onChangeEmailInput}
  20.           placeholder="Enter Email"
  21.         />
  22.         <FormControl.Feedback />
  23.       </FormGroup>
  24.       <FormGroup
  25.         controlId="formBasicText"
  26.       >
  27.         <ControlLabel>请输入您的密码</ControlLabel>
  28.         <FormControl
  29.           type="password"
  30.           onChange={onChangePasswordInput}
  31.           placeholder="Enter Password"
  32.         />
  33.         <FormControl.Feedback />
  34.       </FormGroup>
  35.       <Button 
  36.         onClick={onLoginSubmit} 
  37.         bsStyle="success" 
  38.         bsSize="large" 
  39.         block
  40.       >
  41.         提交送出
  42.       </Button>
  43.     </Form>
  44.   </div>
  45. );
  47. export default LoginBox;

以下是 src/common/containers/LoginBoxContainer/LoginBoxContainer.js：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import LoginBox from '../../components/LoginBox';
  5. import { 
  6.   authStart,
  7.   showSpinner,
  8.   setUser,
  9. } from '../../actions';
  11. export default connect(
  12.   (state) => ({
  13.     email: state.getIn(['user', 'email']),
  14.     password: state.getIn(['user', 'password']),
  15.   }),
  16.   (dispatch) => ({
  17.     onChangeEmailInput: (event) => (
  18.       dispatch(setUser({ key: 'email', value: event.target.value }))
  19.     ),
  20.     onChangePasswordInput: (event) => (
  21.       dispatch(setUser({ key: 'password', value: event.target.value }))
  22.     ),
  23.     onLoginSubmit: (email, password) => () => {
  24.       dispatch(authStart(dispatch, email, password));
  25.       dispatch(showSpinner());
  26.     },
  27.   }),
  28.   (stateProps, dispatchProps, ownProps) => {
  29.     const { email, password } = stateProps;
  30.     const { onLoginSubmit } = dispatchProps;
  31.     return Object.assign({}, stateProps, dispatchProps, ownProps, {
  32.       onLoginSubmit: onLoginSubmit(email, password),
  33.     });
  34.   }
  35. )(LoginBox);

在 src/common/components/LoginPage/LoginPage.js，当 spinnerVisible 为 true 会显示 spinner：

  1. import React from 'react';
  2. import { Grid, Row, Col, Image } from 'react-bootstrap';
  3. import LoginBoxContainer from '../../containers/LoginBoxContainer';
  5. const LoginPage = ({
  6.   spinnerVisible,
  7. }) => (
  8.   <div>
  9.     <Row className="show-grid">
  10.       <Col xs={6} xsOffset={3}>
  11.         <LoginBoxContainer />
  12.         { spinnerVisible === true ?
  13.           <Image src="/static/images/loading.gif" /> :
  14.           null
  15.         }
  16.       </Col>
  17.     </Row>
  18.   </div>
  19. );
  21. export default LoginPage;

以下是 src/common/containers/LoginPageContainer/LoginPageContainer.js：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import LoginPage from '../../components/LoginPage';
  5. export default connect(
  6.   (state) => ({
  7.     spinnerVisible: state.getIn(['ui', 'spinnerVisible']),
  8.   }),
  9.   (dispatch) => ({
  10.   })
  11. )(LoginPage);

真正设计我们内部的食谱， src/common/components/RecipeBox，使用者登入的话可以修改和删除食谱：

  1. import React from 'react';
  2. import { Grid, Row, Col, Image, Thumbnail, Button } from 'react-bootstrap';
  4. const RecipeBox = (props) => {
  5.   return(
  6.       <Col xs={6} md={4}>
  7.         <Thumbnail src={props.recipe.get('imagePath')} alt="242x200">
  8.           <h3>{props.recipe.get('name')}</h3>
  9.           <p>{props.recipe.get('description')}</p>
  10.           {
  11.             props.isAuthorized === true ? (
  12.             <p>
  13.               <Button bsStyle="primary" onClick={props.onDeleteRecipe(props.recipe.get('_id'))}>删除</Button>&nbsp;
  14.               <Button bsStyle="default" onClick={props.onUpadateRecipe(props.recipe.get('_id'))}>修改</Button>
  15.             </p>)
  16.             : null            
  17.           }
  18.         </Thumbnail>
  19.       </Col>
  20.     );
  21. }
  23. export default RecipeBox;

以下是 src/common/containers/RecipeBoxContainer/RecipeBoxContainer.js：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import RecipeBox from '../../components/RecipeBox';
  4. import { browserHistory } from 'react-router';
  6. import {
  7.   deleteRecipe,
  8.   setRecipe,
  9.   setUi
  10. } from '../../actions';
  12. export default connect(
  13.   (state) => ({
  14.     isAuthorized: state.getIn(['user', 'isAuthorized']),
  15.     recipes: state.getIn(['recipe', 'recipes']),
  16.   }),
  17.   (dispatch) => ({
  18.     onDeleteRecipe: (recipeId) => () => (
  19.       dispatch(deleteRecipe(dispatch, recipeId))
  20.     ),
  21.     onUpadateRecipe: (recipes) => (recipeId) => () => {
  22.       const recipeIndex = recipes.findIndex((_recipe) => (_recipe.get('_id') === recipeId));
  23.       const recipe = recipeIndex !== -1 ? recipes.get(recipeIndex) : undefined;
  24.       dispatch(setRecipe({ keyPath: ['recipe'], value: recipe }));
  25.       dispatch(setRecipe({ keyPath: ['recipe', 'id'], value: recipeId }));
  26.       dispatch(setUi({ key: 'isEdit', value: true }));
  27.       browserHistory.push('/share?recipeId=' + recipeId); 
  28.     },
  29.   }),
  30.   (stateProps, dispatchProps, ownProps) => {
  31.     const { recipes } = stateProps; 
  32.     const { onUpadateRecipe } = dispatchProps; 
  33.     return Object.assign({}, stateProps, dispatchProps, ownProps, {
  34.       onUpadateRecipe: onUpadateRecipe(recipes),
  35.     });
  36.   }
  37. )(RecipeBox);

设计我们分享食谱页面，这边我们把编辑食谱和新增分享一起共用了同一个 components，差别在于我们会判断 UI State 中的 isEdit， 决定相应处理方式。在中 src/common/components/ShareBox/ShareBox.js，可以让使用者登入的后修改和删除食谱：

  1. import React from 'react';
  2. import { Form, FormGroup, Button, FormControl, ControlLabel } from 'react-bootstrap';
  4. const ShareBox = (props) => {
  5.   return (<div>
  6.     <Form horizontal>
  7.       <FormGroup
  8.         controlId="formBasicText"
  9.       >
  10.         <ControlLabel>请输入食谱名称</ControlLabel>
  11.         <FormControl
  12.           type="text"
  13.           placeholder="Enter text"
  14.           defaultValue={props.name}
  15.           onChange={props.onChangeNameInput}
  16.         />
  17.         <FormControl.Feedback />
  18.       </FormGroup>
  19.       <FormGroup
  20.         controlId="formBasicText"
  21.       >
  22.         <ControlLabel>请输入食谱说明</ControlLabel>
  23.         <FormControl 
  24.           componentClass="textarea" 
  25.           placeholder="textarea" 
  26.           defaultValue={props.description}          
  27.           onChange={props.onChangeDescriptionInput}
  28.         />
  29.         <FormControl.Feedback />
  30.       </FormGroup>
  31.       <FormGroup
  32.         controlId="formBasicText"
  33.       >
  34.         <ControlLabel>请输入食谱图片网址</ControlLabel>
  35.         <FormControl
  36.           type="text"
  37.           placeholder="Enter text"
  38.           defaultValue={props.imagePath}
  39.           onChange={props.onChangeImageUrl}
  40.         />
  41.         <FormControl.Feedback />
  42.       </FormGroup>
  43.       <Button 
  44.         onClick={props.onRecipeSubmit} 
  45.         bsStyle="success" 
  46.         bsSize="large" 
  47.         block
  48.       >
  49.         提交送出
  50.       </Button>
  51.     </Form>
  52.   </div>);
  53. };
  55. export default ShareBox;

以下是 src/common/containers/ShareBoxContainer/ShareBoxContainer.js：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import ShareBox from '../../components/ShareBox';
  5. import { 
  6.   addRecipe,
  7.   updateRecipe,
  8.   showSpinner,
  9.   setRecipe,
  10. } from '../../actions';
  12. export default connect(
  13.   (state) => ({
  14.     recipes: state.getIn(['recipe', 'recipes']),
  15.     recipeId: state.getIn(['recipe', 'recipe', 'id']),
  16.     name: state.getIn(['recipe', 'recipe', 'name']),
  17.     description: state.getIn(['recipe', 'recipe', 'description']),
  18.     imagePath: state.getIn(['recipe', 'recipe', 'imagePath']),
  19.     isEdit: state.getIn(['ui', 'isEdit']),
  20.   }),
  21.   (dispatch) => ({
  22.     onChangeNameInput: (event) => (
  23.       dispatch(setRecipe({ keyPath: ['recipe', 'name'], value: event.target.value }))
  24.     ),
  25.     onChangeDescriptionInput: (event) => (
  26.       dispatch(setRecipe({ keyPath: ['recipe', 'description'], value: event.target.value }))
  27.     ),
  28.     onChangeImageUrl: (event) => (
  29.       dispatch(setRecipe({ keyPath: ['recipe', 'imagePath'], value: event.target.value }))
  30.     ),    
  31.     onRecipeSubmit: (recipes, recipeId, name, description, imagePath, isEdit) => () => {
  32.       if (isEdit === true) {
  33.         dispatch(updateRecipe(dispatch, recipeId, name, description, imagePath));
  34.         dispatch(showSpinner());
  35.       } else {
  36.         dispatch(addRecipe(dispatch, name, description, imagePath));
  37.         dispatch(showSpinner());
  38.       }
  39.     },    
  40.   }),
  41.   (stateProps, dispatchProps, ownProps) => {
  42.     const { recipes, recipeId, name, description, imagePath, isEdit } = stateProps;
  43.     const { onRecipeSubmit } = dispatchProps;
  44.     return Object.assign({}, stateProps, dispatchProps, ownProps, {
  45.       onRecipeSubmit: onRecipeSubmit(recipes, recipeId, name, description, imagePath, isEdit),
  46.     });
  47.   }  
  48. )(ShareBox);

单纯的 SharePage（src/common/components/SharePage/SharePage.js）页面：

  1. import React from 'react';
  2. import { Grid, Row, Col } from 'react-bootstrap';
  3. import ShareBoxContainer from '../../containers/ShareBoxContainer';
  5. const SharePage = () => (
  6.   <div>
  7.     <Row className="show-grid">
  8.       <Col xs={6} xsOffset={3}>
  9.         <ShareBoxContainer />
  10.       </Col>
  11.     </Row>
  12.   </div>
  13. );
  15. export default SharePage;

以下是 src/common/containers/SharePageContainer/SharePageContainer.js：

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import SharePage from '../../components/SharePage';
  5. export default connect(
  6.   (state) => ({
  7.   }),
  8.   (dispatch) => ({
  9.   })
  10. )(SharePage);

恭喜你成功抵达终点！若一切顺利，在终端机打上 $ npm start，你将可以在浏览器的 http://localhost:3000 看到自己的成果！

用 React + Redux + Node（Isomorphic）开发一个食谱分享网站

总结

本章整合过去所学和添加一些后端资料库知识开发了一个可以登入会员并分享食谱的社群网站！快把你的成果和你的朋友分享吧！觉得意犹未尽？别忘了附录也很精采！最后，再次谢谢读者们支持我们一路走完了 React 开发学习之旅！然而前端技术变化很快，唯有不断自我学习才能持续成长。笔者才疏学浅，撰写学习心得或有疏漏，若有任何建议或提醒都欢迎和我说，大家一起加油：）

延伸阅读

  1. joshgeller/react-redux-jwt-auth-example
  2. @rajaraodv/securing-react-redux-apps-with-jwt-tokens-fcfe81356ea0#.5hfri5j5m">Securing React Redux Apps With JWT Tokens
  3. Adding Authentication to Your React Native App Using JSON Web Tokens
  4. Authentication in React Applications, Part 2: JSON Web Token (JWT)
  5. Node.js 身份认证：Passport 入门
  6. react-bootstrap compatibility #83
  7. How to authenticate routes using Passport? #725
  8. Isomorphic React Web App Demo with Material UI
  9. react-router/examples/auth-flow/
  10. redux-promise
  11. @github/items/42bddf01d36dc18bdc8e">How to use redux-promise
  12. Authenticate a Node.js API with JSON Web Tokens
  13. 3 JavaScript ORMs You Might Not Know
  14. lynndylanhurley/redux-auth
  15. How to avoid getting error ‘localStorage is not defined’ on server in ReactJS isomorphic app?
  16. Where to Store your JWTs – Cookies vs HTML5 Web Storage
  17. What is the difference between server side cookie and client side cookie? [closed]
  18. Cookies vs Tokens. Getting auth right with Angular.JS
  19. Cookies vs Tokens: The Definitive Guide
  20. joshgeller/react-redux-jwt-auth-example
  21. Programmatically navigate using react router
  22. withRouter HoC (higher-order component) v2.4.0 Upgrade Guide

License

MIT, Special thanks Loading.io

| 勘误、提问或许愿 |