筆記備份

安裝套件

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

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

import { combineReducers } from "redux"; import Global from "./Global"; export default combineReducers({ Global })

建立Middlewares

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
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;