# 筆記備份

### 安裝套件

npm install react-redux 
npm install @reduxjs/toolkit
npm install react-router-dom@5.2.0
npm install axios
npm install sass
npm install redux-thunk

### 建立.env檔

GENERATE_SOURCEMAP=false
REACT_APP_ENV=development
PORT=8000

REACT_APP_API_PROTOCOL=http
REACT_APP_API_HOST=
REACT_APP_API_PORT=
REACT_APP_API_PREFIX=

### 建立config.js
串接api路由

const api = {
    protocol: process.env.REACT_APP_API_PROTOCOL || "http",
    host: process.env.REACT_APP_API_HOST || "localhost",
    port: process.env.REACT_APP_API_PORT || 80,
    prefix: process.env.REACT_APP_API_PREFIX || "",
};

const apiRoute = {
    api: `${api.protocol}://${api.host}:${api.port}${api.prefix}`,
}
export default apiRoute;

### 建立reducers

import { combineReducers } from "redux";

import Global from "./Global";

export default combineReducers({ Global })

### 建立Middlewares

import axios from "axios"
import config from "../config.js"

const token = localStorage.getItem("user-token");
const BaseUrl = config.api;
const _axios = axios.create({
    baseURL: BaseUrl,
    timeout: 30000,
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Authorization': `bearer ${token}`
    }
})

const fetch = store => next => action => {
    switch (action.type) {
        case "":
            _axios
                .get(``)
                .then(response => {
                    if (response.status === 200) {
                        return response.data;
                    }
                })
                .catch(err => {
                    if (err.response.status === 401) {

                    }
                    alert(err.response.data.message);
                    throw new Error(err);
                })
                .then(json => {
                    if (action.callback) {
                        action.callback(json)
                    }
                })
            break;
        default:
            break;
    }
    return next(action);
}
export default fetch;