Загрузка локального файла json в хранилище примитивов с помощью axios, но после обновления по другому маршруту происходит сбой

Question

Итак, я практикую React и Redux и загружаю локальный файл json в магазин следующим образом ...

import { LOAD_BOOKS } from "./booksConstants";
import axios from "axios";

export const loadBooks = data => {
    return {
        type: LOAD_BOOKS,
        payload: data
    };
};

export const asyncLoadBooks = () => {
    return async dispatch => {
        const response = await axios.get("books.json");
        const data = response.data.books;
        dispatch(loadBooks(data));
    };
};

А вот редуктор ...

import { LOAD_BOOKS } from "./booksConstants";
import { createReducer } from "../../store/reducerUtil";

const initialState = {
    books: []
};

export const loadBooks = (state, payload) => {
    return {
        ...state,
        books: payload
    };
};

export default createReducer(initialState, {
    [LOAD_BOOKS]: loadBooks
});

И я подключаю App.js к магазину с помощью connect () и запускаю 'asyncLoadBooks ()' в 'componentDidMount ()', как это ...

componentDidMount() {
    try {
        this.props.asyncLoadBooks();
    } catch (error) {
        console.log(error);
    }
}

И всеработает просто отлично, когда я зацикливаюсь на данных и отображаю их, однако, если я нахожусь на любом другом маршруте, кроме "/" и обновляю приложение вручную, это дает мне эту ошибку Failed to load resource: the server responded with a status of 404 (Not Found)

Я пыталсяпереместить методы в конструктор вместо 'componentDidMount', но это не сработало.

Что мне здесь делать?И имейте в виду, что я хочу использовать axios и redux для их практического применения.

Edit

Я помещаю console.log в каждого создателя асинхронных действий и, очевидно, когда я нахожусь на любом маршрутекроме home "/" он пытается получить файл JSON по этому пути и не может его найти GET http://localhost:3000/category/books.json 404 (Not Found)

Как мне решить эту проблему?

Answer 1

Хорошо, ребята, я разобрался, проблема была в axios при попытке извлечь файл JSON по разным путям, когда вы находитесь на разных маршрутах, я исправил это, установив глобальный baseURL по умолчанию для axios вindex.js файл вроде этого ...

import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000/";

А теперь вы можете обновить любой маршрут, и данные будут успешно получены.