如何在 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;