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
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=
串接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;
Learn More →
import { combineReducers } from "redux";
import Global from "./Global";
export default combineReducers({ Global })
Learn More →
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;
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up