redux-toolkit 在 axios 中使用

修改 redux 狀態不會只有在頁面中,打 api 的時候也會需要,但是useDispath他只能讓你在hook中使用。

import axios from "axios";
import { logout } from "@/store/slice/auth";
export const interceptor = store => { // 外面包一層function,接收store
  axios.interceptors.request.use(
    config => {
      config = {
        ...config,
        withCredentials: true,
        baseURL: process.env.REACT_APP_API_URL,
      };
      return config;
    },
    function (error) {
      return Promise.reject(error);
    },
  );

  axios.interceptors.response.use(
    response => {
      response = {
        ...response,
      };
      return response;
    },
    function (error) {
      const status = error.response.status;
      if (status === 401) {
        store.dispatch(logout()); // 使用dispatch
      } 
      return Promise.reject(error);
    },
  );
};

//...

在App.js中呼叫

import React from "react";
import { Provider } from "react-redux";

import MainRoute from "@/views/MainRoute";
import store from "@/store";
import { interceptor } from "@/utils/request"; // 引入axios function
interceptor(store); // 傳入store

function App() {
  return (
    <Provider store={store}>
      <MainRoute />
    </Provider>
  );
}

export default App;

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。