Как эффективно использовать redux в react, делая запрос к внутреннему серверу?

Я новичок в использовании react и также новичок в redux, я работаю над проектом, который использует Django для Back-end и React для Front-end. Я хочу использовать redux для управления состоянием данных, но мне кажется, что я не могу сделать это правильно. Проблема в том, что запрос достигает бэкенда, а также у меня возникли проблемы с обработкой обещания, возвращаемого Axios.

Вот моя функция action transaction.js:

import axios from "axios";

export const CREATE_TRANSACTION = "CREATE_TRANSACTION";
export const VIEW_TRANSACTION = "VIEW_TRANSACTION";
export const UPDATE_TRANSACTION = "UPDATE_TRANSACTION";
export const LIST_TRANSACTIONS = "LIST_TRANSACTIONS";
export const DELETE_TRANSACTION = "DELETE+TRANSACTION";
export const GET_TRANSACTIONLIST_DATA = "GET_TRANSACTIONLIST_DATA";

const ROOT_URL = "http://127.0.0.1:8000/api/";

export const getTransactionList = () => (dispatch) => {
  axios
    .get(`${ROOT_URL}transactions/`, {
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then((response) => {
      dispatch({ type: LIST_TRANSACTIONS, payload: response.data });
      console.log(response.data);
    });
};

Вот моя функция reducer transactions.js:

import { LIST_TRANSACTIONS } from "../actions/transaction";

export function TransactionReducer(state = {}, action) {
  switch (action.type) {
    case LIST_TRANSACTIONS:
      return action.payload;
    default:
      return state;
  }
} 

Мой store.js:

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ latency: 0 })
  : compose;

const store = createStore(
  rootReducer,
  initialState,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

Попытка отобразить данные с помощью useSelector()

import React, { useEffect } from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { useSelector, useDispatch } from "react-redux";
import { getTransactionList } from "../../actions/transaction";

export default function TransactionList() {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.transactions);
  console.log(data);
  useEffect(() => {
    dispatch(getTransactionList());
  }, [dispatch]);

  return (
    <TableContainer component={Paper} sx={{ boxShadow: "none" }}>

Последний мой index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";


ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      {" "}
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);


reportWebVitals();

Пожалуйста, любая помощь будет высоко оценена, ПОМНИТЕ, ЧТО Я НОВИЧОК В ИСПОЛЬЗОВАНИИ ЭТИХ ТЕХНОЛОГИЙ. Любая необходимая дополнительная информация может быть предоставлена.

const store = createStore(
  rootReducer,
  initialState,
  composeEnhancers(applyMiddleware(thunk))
);

import { combineReducers } from 'redux';
import { TransactionReducer } from 'your/path/TransactionReducer';
import { fooReducer } from 'your/path/fooReducer';
import { barReducer } from 'your/path/barReducer';

export const rootReducer = combineReducers({
  transactions: TransactionReducer,
  foo: fooReducer,
  bar: barReducer,
});