學習 React.js：用 React.js 和 Flux 創建一個簡單的購物車

浏览数：44 / 时间：2015年06月09日

Creating A Simple Shopping Cart with React.js and Flux

Ken Wheeler (@ken_wheeler)

簡介

歡迎來到學習 React 的第四章這也是最後一章！到現在，我們已經學習了怎樣利用 React 的 API 來創建狀態型組件，如何應用它們，以及如何運用臉書的 Flux 架構來工作的

今天我們將把所有的這一切放到一塊，來創建一個簡單的購物車應用。在現在的電商網站上，產品的詳細頁面相互依賴，而 React 有助於簡化並有效的組織它們。

如果你還沒準備好，我強烈建議你看看這個學習系列前面的三篇文章:

ReactJS 0.12

在寫這系列文章的時候，React 的 0.12 版發布了，而且還有不少變化。這篇教程將會用 0.12 的語法來寫。這些改變包括以下這些：

用 JSX 語法的時候不再需要 /** @jsx React.DOM */ 頭聲明了
renderComponent 改成 render
renderComponentToString 改成 renderToString

你可以在官方的博客的更新日志了解更多的改变。

開始

我們搭建一個應用的第一步是首先確定我們應該做什麼。我們需要這樣：

顯示有幾個選項的產品
價格隨著不同選擇改變
追加物品到購物車
從購物車移除物品
顯示在購物車中商品個數
顯示在購物車中商品總價
根據選項顯示每種商品的小結
當沒有庫存的時候，把"放到購物車"改成"售罄”
點擊"查看購物車"之後跳轉購物車頁面

下面是完成圖：

技术分享

這個應用將用純客戶端開發，原因是我不打算寫服務端。我們將會用模擬 API 以及模擬數據，這樣，我們可以集中在組件上面。下面來看看我們的目錄結構：

目錄結構

<!-- lang: js -->
css/
---- app.css
img/
---- scotch-beer.png
js/
---- actions/
-------- FluxCartActions.js     // Our app‘s action creators
---- components/
-------- FluxCart.react.js      // Cart Component
-------- FluxCartApp.react.js   // Main Controller View
-------- FluxProduct.react.js   // Product Component
---- constants/
-------- FluxCartConstants.js   // Our app‘s action constants
---- dispatcher/
-------- AppDispatcher.js       // Our app‘s dispatcher
---- stores/
-------- CartStore.js           // Cart Store
-------- ProductStore.js            // Product Store
---- utils/
-------- CartAPI.js             // Mock API
---- app.js                     // Main app.js file
---- ProductData.js             // Mock Data
index.html
package.json

下面，來看看我們的 package.json 文件。我們會用到下面這些模塊：

Browserify
Reactify
React
Flux
Watchify
Uglify
Underscore
Envify

我們可以直接執行 npm install 來安裝所有的依賴項，然後執行 npm start 指令來啟動進程，監控我們的工程以及當我們保存修改的時候進行打包。

package.json

<!-- lang: js -->
{
  "name": "flux-pricing",
  "version": "0.0.1",
  "description": "Pricing component with flux",
  "main": "js/app.js",
  "dependencies": {
    "flux": "^2.0.0",
    "react": "^0.12.0",
    "underscore": "^1.7.0"
  },
  "devDependencies": {
    "browserify": "~6.2.0",
    "envify": "~3.0.0",
    "react": "^0.12.0",
    "reactify": "^0.15",
    "watchify": "~2.1.0"
  },
  "scripts": {
    "start": "watchify -o js/bundle.js -v -d .",
    "build": "browserify . | uglifyjs -cm > js/bundle.min.js"
  },
  "author": "Ken Wheeler",
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  }
}

API & 模擬數據

為了保持我們可以專注在 Flux & React 上，我們將使用模擬 API 和模擬數據來演示我們的工程。也就是說，雖然數據是假的，但是 API 本身是和真正的 API 一致的，當我們需要用真的 API 的時候，可以很容易的就遷移過去。

讓我們來看看模擬的產品數據是怎樣的：

ProductData.js

<!-- lang: js -->
module.exports = {
  // Load Mock Product Data Into localStorage
  init: function() {
    localStorage.clear();
    localStorage.setItem(‘product‘, JSON.stringify([
      {
        id: ‘0011001‘,
        name: ‘Scotch.io Signature Lager‘,
        image: ‘scotch-beer.png‘,
        description: ‘The finest lager money can buy. Hints of keyboard aerosol, with a whiff of iKlear wipes on the nose. If you pass out while drinking this beverage, Chris Sevilleja personally tucks you in.‘,
        variants: [
          {
            sku: ‘123123‘,
            type: ‘40oz Bottle‘,
            price: 4.99,
            inventory: 1

          },
          {
            sku: ‘123124‘,
            type: ‘6 Pack‘,
            price: 12.99,
            inventory: 5
          },
          {
            sku: ‘1231235‘,
            type: ‘30 Pack‘,
            price: 19.99,
            inventory: 3
          }
        ]
      }
    ]));
  }

};

就像你看到的那樣，我們定義了一個產品，它有個叫做 variants 的選項。我們的 schema 還反映了數據的類型，你可以通過簡單的調用一個 RESTful API 來拿到數據。我們準備把這個數據放到 localStorage，這樣我們的模擬 API 可以拿到並且在我們的應用中使用它們。

來看我們的模擬 API 是怎樣從 localStorage 獲取數據的，然後又是怎樣用 Flux action 把這些數據發送到我們的 ProductStore 中的：

CartAPI.js

<!-- lang: js -->
var FluxCartActions = require(‘../actions/FluxCartActions‘);

module.exports = {

  // Load mock product data from localStorage into ProductStore via Action
  getProductData: function() {
    var data = JSON.parse(localStorage.getItem(‘product‘));
    FluxCartActions.receiveProduct(data);
  }

};

好了，現在我們又了我們的樣本產品數據，有了樣本 API，我們該怎樣利用它們開始我們的應用。

要初始化我們的數據，啟動我們的 API 調用，然後掛載我們的 controller view 真的是非常簡單。我們的 app.js 文件，如下，是用來處理這個流程的：

app.js

<!-- lang: js -->
window.React = require(‘react‘);
var ProductData = require(‘./ProductData‘);
var CartAPI = require(‘./utils/CartAPI‘)
var FluxCartApp = require(‘./components/FluxCartApp.react‘);

// Load Mock Product Data into localStorage
ProductData.init();

// Load Mock API Call
CartAPI.getProductData();

// Render FluxCartApp Controller View
React.render(
  <FluxCartApp />,
  document.getElementById(‘flux-cart‘)
);

Dispatcher

因為我們這個應用要用到 Flux ，我們需要創建我們自己的臉書 Dispatcher 庫。我們還要添加一個 handleAction 幫助方法到我們的 Dispatcher 實例，這樣才我們可以確定 action 的來源。

雖然我們當前的應用沒有明確要求這樣做，但是如果我們想把它掛到真正 API 上，或者處理一些從 View 以外來的動作的話，這將是極好的一個解決方法。

AppDispatcher.js

<!-- lang: js -->
var Dispatcher = require(‘flux‘).Dispatcher;

// Create dispatcher instance
var AppDispatcher = new Dispatcher();

// Convenience method to handle dispatch requests
AppDispatcher.handleAction = function(action) {
  this.dispatch({
    source: ‘VIEW_ACTION‘,
    action: action
  });
}

module.exports = AppDispatcher;

在我們的 handleAction 方法裏面，我們從 action creator 接收到一個 action，然後我們的的 Dispatcher 把 action 和一個 source 屬性一起推送出去，這樣 action 就像一個參數一樣可以被使用了。

Actions

現在我們已經完成了依賴項目，數據和我們的 Dispatcher，現在開始來看看我們的工程的實際需求。Action 是很好的起點。讓我們先定義好 action 常量，都是應用要用到的機能：

FluxCartConstants.js

<!-- lang: js -->
var keyMirror = require(‘react/lib/keyMirror‘);

// Define action constants
module.exports = keyMirror({
  CART_ADD: null,       // Adds item to cart
  CART_REMOVE: null,    // Remove item from cart
  CART_VISIBLE: null,   // Shows or hides the cart
  SET_SELECTED: null,   // Selects a product option
  RECEIVE_DATA: null    // Loads our mock data
});

定義好我們的常量，我們需要創建實際的 action 方法。這些方法將會在我們的視圖/組件裏面被調用，然後告訴我們的 Dispatcher 廣播推送 action 到 Stores

action 本身包含了我們所需要的 action 常量和數據。我們的 Stores 然後會觸發更新事件，這些事件被 Controller View 監聽，這樣它們就知道什麼時候該更新狀態了。

下面，來看看我們是怎樣用 Dispatcher 的 handleAction 方法來傳遞 actionType 常量和關聯數據到 Dispatcher 的：

FluxCartActions.js

<!-- lang: js -->
var AppDispatcher = require(‘../dispatcher/AppDispatcher‘);
var FluxCartConstants = require(‘../constants/FluxCartConstants‘);

// Define actions object
var FluxCartActions = {

  // Receive inital product data
  receiveProduct: function(data) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.RECEIVE_DATA,
      data: data
    })
  },

  // Set currently selected product variation
  selectProduct: function(index) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.SELECT_PRODUCT,
      data: index
    })
  },

  // Add item to cart
  addToCart: function(sku, update) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.CART_ADD,
      sku: sku,
      update: update
    })
  },

  // Remove item from cart
  removeFromCart: function(sku) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.CART_REMOVE,
      sku: sku
    })
  },

  // Update cart visibility status
  updateCartVisible: function(cartVisible) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.CART_VISIBLE,
      cartVisible: cartVisible
    })
  }

};

module.exports = FluxCartActions;

Stores

現在我們有了 Actions 的定義，下面該來創建 Stores 了。每個 Store 管理著應用中特定部分的狀態，因此我們將為我們的產品和購物車分別創建一個。讓我們先從 ProductStore 下手：

ProductStore.js

<!-- lang: js -->
var AppDispatcher = require(‘../dispatcher/AppDispatcher‘);
var EventEmitter = require(‘events‘).EventEmitter;
var FluxCartConstants = require(‘../constants/FluxCartConstants‘);
var _ = require(‘underscore‘);

// Define initial data points
var _product = {}, _selected = null;

// Method to load product data from mock API
function loadProductData(data) {
  _product = data[0];
  _selected = data[0].variants[0];
}

// Method to set the currently selected product variation
function setSelected(index) {
  _selected = _product.variants[index];
}


// Extend ProductStore with EventEmitter to add eventing capabilities
var ProductStore = _.extend({}, EventEmitter.prototype, {

  // Return Product data
  getProduct: function() {
    return _product;
  },

  // Return selected Product
  getSelected: function(){
    return _selected;
  },

  // Emit Change event
  emitChange: function() {
    this.emit(‘change‘);
  },

  // Add change listener
  addChangeListener: function(callback) {
    this.on(‘change‘, callback);
  },

  // Remove change listener
  removeChangeListener: function(callback) {
    this.removeListener(‘change‘, callback);
  }

});

// Register callback with AppDispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;

  switch(action.actionType) {

    // Respond to RECEIVE_DATA action
    case FluxCartConstants.RECEIVE_DATA:
      loadProductData(action.data);
      break;

    // Respond to SELECT_PRODUCT action
    case FluxCartConstants.SELECT_PRODUCT:
      setSelected(action.data);
      break;

    default:
      return true;
  }

  // If action was responded to, emit change event
  ProductStore.emitChange();

  return true;

});

module.exports = ProductStore;

上面，我們定義了兩個私有方法，loadProductData 和 setSelected。我們用 loadProductData 來，當然，加載我們的模擬數據到 _product 對象。我們的 setSelected 方法用來設置當前選中的產品。

我們用方法 getProduct 和 getSelected 來暴露數據，返回它們各自當前內部數據。在 View 裏面，用 require 我們的 Store 之後，這些方法就可以被利用了。

最後，我們註冊一個囘調到我們的 AppDispatcher ，用 switch 來匹配檢查是否拿到的 action 是我們支持的種類。在它的事件中，我們調用私有方法拿到 action 的數據，然後激活 change 事件，強制我們的 view 用新的狀態刷新。

下面，我們開始做我們的 CartStore：

<!-- lang: js -->
var AppDispatcher = require(‘../dispatcher/AppDispatcher‘);
var EventEmitter = require(‘events‘).EventEmitter;
var FluxCartConstants = require(‘../constants/FluxCartConstants‘);
var _ = require(‘underscore‘);

// Define initial data points
var _products = {}, _cartVisible = false;

// Add product to cart
function add(sku, update) {
  update.quantity = sku in _products ? _products[sku].quantity + 1 : 1;
  _products[sku] = _.extend({}, _products[sku], update)
}

// Set cart visibility
function setCartVisible(cartVisible) {
  _cartVisible = cartVisible;
}

// Remove item from cart
function removeItem(sku) {
  delete _products[sku];
}

// Extend Cart Store with EventEmitter to add eventing capabilities
var CartStore = _.extend({}, EventEmitter.prototype, {

  // Return cart items
  getCartItems: function() {
    return _products;
  },

  // Return # of items in cart
  getCartCount: function() {
    return Object.keys(_products).length;
  },

  // Return cart cost total
  getCartTotal: function() {
    var total = 0;
    for(product in _products){
      if(_products.hasOwnProperty(product)){
        total += _products[product].price * _products[product].quantity;
      }
    }
    return total.toFixed(2);
  },

  // Return cart visibility state
  getCartVisible: function() {
    return _cartVisible;
  },

  // Emit Change event
  emitChange: function() {
    this.emit(‘change‘);
  },

  // Add change listener
  addChangeListener: function(callback) {
    this.on(‘change‘, callback);
  },

  // Remove change listener
  removeChangeListener: function(callback) {
    this.removeListener(‘change‘, callback);
  }

});

// Register callback with AppDispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;

  switch(action.actionType) {

    // Respond to CART_ADD action
    case FluxCartConstants.CART_ADD:
      add(action.sku, action.update);
      break;

    // Respond to CART_VISIBLE action
    case FluxCartConstants.CART_VISIBLE:
      setCartVisible(action.cartVisible);
      break;

    // Respond to CART_REMOVE action
    case FluxCartConstants.CART_REMOVE:
      removeItem(action.sku);
      break;

    default:
      return true;
  }

  // If action was responded to, emit change event
  CartStore.emitChange();

  return true;

});

module.exports = CartStore;

如你所見，我們的這個 store 和 ProductStore 很像。我們用 _products 對象來存儲當前在購物車中的產品，用 _cartVisibility 來標記我們的購物車是否可見。

我們再添加了一些複雜的公共方法，允許我們的 Controller View 來處理應用的狀態:

getCartItems 返回購物車中的物品
getCartCount 返回購物車中的物品總件數
getCartTotal 返回購物車中的物品總價格

好了，Store 就是這樣。下面開始著手寫我們的視圖。

Controller View

我們的 Controller View 是頂級組件，它監聽著我們 stores ，並且根據狀態來調用 Stores 的公用方法。然後會通過 props 來把 state 傳給子控件。

Controller View 主要負責：

通過調用 Store 的公用方法設置我們應用的狀態
通過 props 屬性將 state 傳遞給子控件，操作子控件
監聽 Store 的更新事件

FluxCartApp.react.js

<!-- lang: js -->
var React = require(‘react‘);
var CartStore = require(‘../stores/CartStore‘);
var ProductStore = require(‘../stores/ProductStore‘);
var FluxProduct = require(‘./FluxProduct.react‘);
var FluxCart = require(‘./FluxCart.react‘);

// Method to retrieve state from Stores
function getCartState() {
  return {
    product: ProductStore.getProduct(),
    selectedProduct: ProductStore.getSelected(),
    cartItems: CartStore.getCartItems(),
    cartCount: CartStore.getCartCount(),
    cartTotal: CartStore.getCartTotal(),
    cartVisible: CartStore.getCartVisible()
  };
}

// Define main Controller View
var FluxCartApp = React.createClass({

  // Get initial state from stores
  getInitialState: function() {
    return getCartState();
  },

  // Add change listeners to stores
  componentDidMount: function() {
    ProductStore.addChangeListener(this._onChange);
    CartStore.addChangeListener(this._onChange);
  },

  // Remove change listers from stores
  componentWillUnmount: function() {
    ProductStore.removeChangeListener(this._onChange);
    CartStore.removeChangeListener(this._onChange);
  },

  // Render our child components, passing state via props
  render: function() {
    return (
      <div className="flux-cart-app">
        <FluxCart products={this.state.cartItems} count={this.state.cartCount} total={this.state.cartTotal} visible={this.state.cartVisible} />
        <FluxProduct product={this.state.product} cartitems={this.state.cartItems} selected={this.state.selectedProduct} />
      </div>
    );
  },

  // Method to setState based upon Store changes
  _onChange: function() {
    this.setState(getCartState());
  }

});

module.exports = FluxCartApp;

我們從公有方法 getCartState 開始。我們用這個方法來調用 Stores 的共有方法，接收當前狀態然後設置應用的狀態。我們在 getInitialState 方法中執行第一次，然後在每次接收到 Store 的更新事件時也執行。

為了接收到這些更新事件，我們在加載的時候，往 Stores 追加監聽，這樣就可以知道什麼時候發生改變。同樣，在卸載組件的時候把這些事件移除。

在我們的 render 方法中，我們組合 FluxCart 和 FluxProduct 兩個組件。在這裏，我們把 state 狀態傳給它們，通過組件的屬性或者 props。

Product View

接下來，開始美化我們的應用了，來看 Product View。我們希望用從 Controller View 拿到的狀態，做一個超級豐富的，有良好交互的產品展示。

那麽開始

FluxProduct.react.js

<!-- lang: js -->
var React = require(‘react‘);
var FluxCartActions = require(‘../actions/FluxCartActions‘);

// Flux product view
var FluxProduct = React.createClass({

  // Add item to cart via Actions
  addToCart: function(event){
    var sku = this.props.selected.sku;
    var update = {
      name: this.props.product.name,
      type: this.props.selected.type,
      price: this.props.selected.price
    }
    FluxCartActions.addToCart(sku, update);
    FluxCartActions.updateCartVisible(true);
  },

  // Select product variation via Actions
  selectVariant: function(event){
    FluxCartActions.selectProduct(event.target.value);
  },

  // Render product View
  render: function() {
    var ats = (this.props.selected.sku in this.props.cartitems) ?
      this.props.selected.inventory - this.props.cartitems[this.props.selected.sku].quantity :
      this.props.selected.inventory;
    return (
      <div className="flux-product">
        <img src={‘img/‘ + this.props.product.image}/>
        <div className="flux-product-detail">
          <h1 className="name">{this.props.product.name}</h1>
          <p className="description">{this.props.product.description}</p>
          <p className="price">Price: ${this.props.selected.price}</p>
          <select onChange={this.selectVariant}>
            {this.props.product.variants.map(function(variant, index){
              return (
                <option key={index} value={index}>{variant.type}</option>
              )
            })}
          </select>
          <button type="button" onClick={this.addToCart} disabled={ats  > 0 ? ‘‘ : ‘disabled‘}>
            {ats > 0 ? ‘Add To Cart‘ : ‘Sold Out‘}
          </button>
        </div>
      </div>
    );
  },

});

module.exports = FluxProduct;

來看我們的 render 方法，我們定義了一個 Action，用來把組件綁到指定元素上。通過導入我們的 Action，我們可以從這個方法裏面調用它，並觸發更新處理：

selectProduct 設置當前選中的產品選項
addToCart 添加當前選中的產品到購物車，並打開購物車

在我們的 render 方法裏，我們會算一下被選中的產品還有多少庫存，通過比較我們放到購物車裏面的和庫存。我們通過這樣的計算來更新 “放到購物車” 按鈕狀態。

Cart View

購物車總得有個車把東西裝在一起吧。在我們的應用中，當一個產品被放到購物車，我們用一條數據來表示它被選中，當然你可以增加數量，但是我們不會弄幾條重複的數據。然後再把總價給算出來。

就像下面這樣：

FluxCart.react.js

<!-- lang: js -->
var React = require(‘react‘);
var FluxCartActions = require(‘../actions/FluxCartActions‘);

// Flux cart view
var FluxCart = React.createClass({

  // Hide cart via Actions
  closeCart: function(){
    FluxCartActions.updateCartVisible(false);
  },

  // Show cart via Actions
  openCart: function(){
    FluxCartActions.updateCartVisible(true);
  },

  // Remove item from Cart via Actions
  removeFromCart: function(sku){
    FluxCartActions.removeFromCart(sku);
    FluxCartActions.updateCartVisible(false);
  },

  // Render cart view
  render: function() {
    var self = this, products = this.props.products;
    return (
      <div className={"flux-cart " + (this.props.visible ? ‘active‘ : ‘‘)}>
        <div className="mini-cart">
          <button type="button" className="close-cart" onClick={this.closeCart}>×</button>
          <ul>
            {Object.keys(products).map(function(product){
              return (
                <li key={product}>
                  <h1 className="name">{products[product].name}</h1>
                  <p className="type">{products[product].type} x {products[product].quantity}</p>
                  <p className="price">${(products[product].price * products[product].quantity).toFixed(2)}</p>
                  <button type="button" className="remove-item" onClick={self.removeFromCart.bind(self, product)}>Remove</button>
                </li>
              )
            })}
          </ul>
          <span className="total">Total: ${this.props.total}</span>
        </div>
        <button type="button" className="view-cart" onClick={this.openCart} disabled={Object.keys(this.props.products).length > 0 ? "" : "disabled"}>View Cart ({this.props.count})</button>
      </div>
    );
  },

});

module.exports = FluxCart;

我們有車了！我們的購物車組件有三個方法：

closeCart 關閉購物車
openCart 打開購物車
removeFromCart 從購物車中拿掉

當渲染我們的購物車的時候，我們用 map 方法來渲染我們的每條數據。注意 <li> 標籤，我們添加了 key 屬性。這是一個特殊的屬性，在動態追加子節點到組件上的時候。在 React 內部是唯一標識，這樣它們就可以保持它們正確的狀態和順序了。如果我們刪除掉這個屬性，打開你的控制檯，你會看到 React 會拋出警告說，你的 key 沒有設置，你有可能在渲染的時候出異常。

為了讓我們的購物車切換打開關閉，我們要做的僅僅是通過 React 來操作 CSS，處理 active class。