前端開發的架構思維，從流程、制度到系統

import React, { useReducer } from 'react';

// 定義所有狀態
const initialState = {
  email: '',
  status: 'idle',   // 'idle' | 'submitting' | 'success' | 'error'
  error: null
};

// 定義狀態機 reducer
function reducer(state, action) {
  switch (action.type) {
    case 'INPUT_CHANGE':
      return {
        ...state,
        email: action.payload
      };
    case 'SUBMIT':
      return {
        ...state,
        status: 'submitting',
        error: null
      };
    case 'SUCCESS':
      return {
        ...state,
        status: 'success'
      };
    case 'FAILURE':
      return {
        ...state,
        status: 'error',
        error: action.payload
      };
    default:
      return state;
  }
}

function PasswordResetForm() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleSubmit = async (e) => {
    e.preventDefault();
    dispatch({ type: 'SUBMIT' });

    try {
      await api.sendResetEmail(state.email);
      dispatch({ type: 'SUCCESS' });
    } catch (err) {
      dispatch({ type: 'FAILURE', payload: err.message });
    }
  };

  if (state.status === 'success') {
    return <p>重設密碼的信件已寄至您的信箱，請查收。</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      {state.status === 'error' && <p className="error">{state.error}</p>}
      <input
        type="email"
        value={state.email}
        onChange={(e) => dispatch({ type: 'INPUT_CHANGE', payload: e.target.value })}
        placeholder="請輸入您的註冊信箱"
        disabled={state.status === 'submitting'}
      />
      <button type="submit" disabled={state.status === 'submitting'}>
        {state.status === 'submitting' ? '傳送中...' : '傳送重設信件'}
      </button>
    </form>
  );
}

import { defineStore } from 'pinia';
import { api } from '@/services/api'; // 假設有一個封裝好的 api 服務

export const useProductStore = defineStore('products', {
  // 定義流程中需要管理的數據
  state: () => ({
    topProducts: [],
    isLoading: false,
    error: null,
  }),

  // 定義完整的數據處理流程
  actions: {
    async fetchTopProducts() {
      this.isLoading = true;
      this.error = null;
      try {
        // 步驟一：取得資料 (Fetch)
        const rawData = await api.fetchMonthlySales();

        // 步驟二 & 三：轉換 (Transform) 與排序 (Sort)
        const processedData = rawData
          .map(p => ({
            ...p,
            saleDate: new Date(p.saleDate).toLocaleDateString(), // 格式化日期
          }))
          .sort((a, b) => b.salesVolume - a.salesVolume); // 按銷量排序

        // 將最終結果存入 state
        this.topProducts = processedData;

      } catch (err) {
        console.error("Failed to fetch top products", err);
        this.error = '無法取得商品資料，請稍後再試。';
      } finally {
        this.isLoading = false;
      }
    },
  },
});

{
  path: '/client/user',
  label: '用戶列表',
  // 對應的頁面元件，我多包一層 ProtectedRoute 做檢查，表示此頁需權限保護
  element: (
    <ProtectedRoute>
      <ListClientUserPage />
    </ProtectedRoute>
  ),
  // 權限要求，使用者需擁有其中一個才能訪問
  permission: ['read user', 'manage user'],
}