初めてのdvを探します.ショッピングカートは実戦的です.

7436 ワード

javascript 先端 react.js

DVA概要
dvdはreduxとredux-sagaに基づくデータストリームスキームであり、開発体験を簡略化するために、dvdはreact-routerとfetchを別途内蔵しているので、dvdはライト級のアプリケーションフレームとしても理解できる.公式サイトから
ショッピングカートの例
この練習はdvd+antdを使ってカートの練習をしました.目的はより速くdvdを作るためです.練習の複雑さは高くないです.もっと多いのは基礎運用開発です.
プロジェクトの参考ソース
デモサイト githubコード
基本設定

DVD足場npm install dva-cli -g

をインストールします.

新規プロジェクトdva new shopping-cart-dva cd shopping-cart-dva

を作成します.

dvdプロジェクトでantdを使用します.

yarn add antd babel-plugin-import

は、.webpackrcを編集して、babel-plugin-importプラグインを有効にする

{
    "extraBabelPlugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    ]
}

は.webpackrcを編集し、proxy属性を構成し、プロキシ要求

"proxy": {
    "/api": {
        "target": "http://localhost:3000", //     
        "changeOrigin": true,
        // "pathRewrite": { "^/api" : "" }
    }
}

を要求する.
楽屋を設ける
今回の練習は主にdvdを知るために状態管理をしています.バックグラウンドに対しては高くないです.商品データを簡単に返します.

yarn add cors express

にserverフォルダを新規作成し、expressで簡単なバックグランドを構築します.

新規data/products.jsonを作成し、json形式の商品データ

{
  "products": [
    {
      "id": 12,
      "bigImage":"http://localhost:3000/images/12064273040195392_1.jpg",
      "smallImage":     "http://localhost:3000/images/12064273040195392_2.jpg",
      "sku": 12064273040195392,
      "title": "Cat Tee Black T-Shirt",
      "description": "4 MSL",
      "availableSizes": ["S", "XS"],
      "style": "Black with custom print",
      "price": 10.9,
      "installments": 9,
      "currencyId": "USD",
      "currencyFormat": "$",
      "isFreeShipping": true
    }
  ]
}

を保存します.

はapp.jsを新設し、

const path = require('path');
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

const port = 3000;

app.get('/api/products', (req, res) => {
  res.sendFile(path.join(__dirname, 'data', 'products.json'));
});

app.listen(port, () => {
  console.log(`[products] API listening on port ${port}.`);
});

を編集する.
フロント開発

今回の練習はconcurrentlyパラレルコマンドを使用します.

yarn add concurrently

編集package.json

"scripts": {
    "start": "roadhog server", 
    "server": "nodemon server/app",
    "build": "roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "yarn run lint",
    "dev": "concurrently \"yarn run server\" \"yarn run start\""
},

ここで、私達は直接yarn run devコマンドを使って前後端を起動できます.http://localhost:8000で

にアクセスします.

商品リストのルートを作成します.

新規src\routes\products\index.jsとindex.css(dvaデフォルトサポートCSS Moduleモジュール化、connect()方法が必要なら、dvdから導入する必要がある)

import React, {Component} from 'react';
import { connect } from 'dva';  //   connect()
// import { Badge, Icon } from 'antd';        antd
import styles from './index.css';  //     css

class Products extends Component {
  constructor(){
    super();
  }

  render(){
    return (
      
        soooo many products!!!
      
    );
  }
};

//    products namespace products model 
const mapStateToProps = ({ products })=>{
  return {
    counts: products.counts
  }
};
//  react-redux connect      
export default connect(mapStateToProps)(Products);

編集src/router.js

    import React from 'react';
    import { Router, Route, Switch } from 'dva/router';
    import IndexPage from './routes/IndexPage';
    import Products from './routes/products';
    
    //   hash      
    function RouterConfig({ history }) {
      return (
        
          
            
            
            
        
      );
    }
    
    export default RouterConfig;

dvdはすでにsrc/utils/request.jsにfetch要求を実装してくれました.したがって、src/services/products.jsを新たに作って、バックグラウンドに商品データを要求する方法

import request from '../utils/request';

export function fetch() {
  return request('/api/products');
}

をカプセル化することができます.

dvdは、modelの概念を通じて一つの分野のモデルを管理し、同期更新stateのreducersを含み、非同期論理のeffectsを処理し、データソースを購読するsubscriptionsの新規src/models/products.js

import * as productsService from '../services/products';
    
export default {
    namespace: 'products',
    state: {
        list: [],  //     
    },
    reducers: {
        save(state, { payload: { data: list } }) {
            return { ...state, list };
        }
    },
    effects: {
        *fetch({}, { call, put }) {
            const { data } = yield call(productsService.fetch);
            yield put({
                type: 'save',
                payload: { data: data.products },
            });
        },
    },
    subscriptions: {
        setup({ dispatch, history }) {
            return history.listen(({ pathname }) => {
                if (pathname === '/products') {
                  dispatch({ type: 'fetch' });
                }
            });
        },
    },
};

をここに来て、model層とservice層は簡単に構築されました.

拡張:modelのsubscription購読

modelのsubscriptionは、1つのモニターに相当し、ルーティングの変化、マウス、キーボードの変化、サーバの接続の変化、状態の変化などを傍受することができます.このようにすれば、異なる変化に応じて対応する処理ができます.だから、それなりの判断を加えながら

subsriptionプラグインは実際の開発において、バックエンドに商品データを要求することがあるので、最初に商品データを入手することができないかもしれません.だから、データをロードする過程で、ユーザーに「ロード中です.」というヒントを与えます.dva-loadingプラグインは、このプロセスを簡略化してくれます.

dva-loading

修正yarn add dva-loading

import createLoading from 'dva-loading';
app.use(createLoading());

続いて、私達はコンポーネントの中で

const ProductsList = ({ list, loading }) => {
    ...
    // loading    true,false
    //             loading     true   false 
    //       loading                ，         
}

export default connect(({ products, loading }) => ({
  list: products.list,
  //   ：products     model  namespace
  loading: loading.models.products
}))(ProductsList);

を使うことができます.

Webフロントエンドデータストア-クッキー機構