React腳手架搭建

前言

之前的 multi-spa-webpack-cli 只是爲 React + antd 模板提供了開發時必要的環境，對於實際的開發並沒有什麼用處。
爲了更貼近實際開發，本次 React + antd 模板完善了一些功能。

1. 封裝 fetch，新增請求錯誤提示；
2. 集成 react-router-dom 路由管理；
3. 集成 react-redux 狀態管理；
4. 必不可少的 antd 集成；
5. node 服務集成（可選）。

node 服務和 React+antd 模板是沒有多大的關係的。本文只是想通過一個簡單的登陸邏輯來演示以上的功能，所以 node 服務不是必須的。

multi-spa-webpack-cli 已經發布到 npm，只要在 node 環境下安裝即可。

npm install multi-spa-webpack-cli -g

使用步驟如下:

# 1. 初始化項目
multi-spa-webpack-cli init spa-project

<center>

</center>

# 2. 進入文件目錄
cd spa-project

# 3. 安裝依賴
npm install

# 4. 打包不變的部分
npm run build:dll

# 5. 啓動項目（手動打開瀏覽器：localhost:8090）
npm start

# 6. 啓動服務(可選)
cd server
npm install
npm start

預覽：

<center>

</center>

封裝 fetch

現在處理異步的方式，大多數基於 Promise 的。而 fetch 是天然支持 Promise 的，所以無需再手動封裝。在 PWA 技術中，已作爲一個重要的組成部分在使用。

fetch 爲人詬病的缺點之一，就是不能 Abort 請求。有方案提出提出，通過 Promise.race 的方法來模擬 timeout。實際上該執行的已然執行，只是表象上達到了預期的效果。不過瀏覽器現以實驗性開始支持 AbortController 。

import { notification } from 'antd';

const env = process.env.NODE_ENV;
const baseURL = APP_CONFIG[env].ip;
// timeout ;
// const controller = new AbortController();
// const signal = controller.signal;
const defaultConfig = {
  credentials: 'include',
  headers: {
    Accept: 'application/json'
  },
  // signal
};
const codeMessage = {
  301: '永久移動',
  302: '臨時移動',
// ...
  504: '網關超時。'
};

const checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `請求錯誤 ${response.status}: ${response.url}`,
    description: errortext
  });
};

export default async function Fetch(url, config) {
  let newUrl = baseURL + url;
  let newConfig = {
    ...defaultConfig,
    ...config
  };
  // const timeoutId = setTimeout(() => controller.abort(), 5000);
  if (
    newConfig.method.toLocaleLowerCase() === 'post' ||
    newConfig.method.toLocaleLowerCase() === 'put' ||
    newConfig.method.toLocaleLowerCase() === 'delete'
  ) {
    if (!(newConfig.body instanceof FormData)) {
      newConfig.headers['Content-Type'] = 'application/json; charset=utf-8';
      newConfig.body = JSON.stringify(newConfig.body);
    }
  }
  try {
    const response = await fetch(newUrl, newConfig);
    // clearTimeout(timeoutId);
    return checkStatus(response).json();
  } catch (error) {
    notification.error({
      message: `請求錯誤 : ${newUrl}`,
      description: error.message
    });
    throw error;
  }
}

集成 react-router-dom 路由管理

自 raect-router v4 之後，便不再支持集中式管理路由，不過也可以自己手動去實現。React + antd 模板採用的是官網推薦的方式，layouts 目錄下的文件用來管理路由。

<center>

</center>

集成 react-redux 狀態管理

Redux 作爲狀態管理工具，除了 React，也可以用在其他地方（意思是說，和 React 沒半毛錢關係）。在React中使用時，我們需要藉助 React-redux 工具，這樣使用起來更加方便。

嚴格的單向數據流是 Redux 架構的設計核心。

redux 數據流向：

就是把 action（行爲） dispatch（丟給）reducer（更新 state）。

<center>

</center>

node 服務集成（可選）

node 服務登陸採用的是 session 來記錄狀態。

<center>

</center>

就這樣，一個簡單的腳手架宣告完成。

不過，這才只是個開始。