reactjs - react-redux フックを使用して React アプリで Redux Reducer が呼び出されない

Question

フックを使用してreact reduxの作業を開始したばかりですが、レデューサーが通過していないようです。私は公式ドキュメントに従っています。ここに欠けているものはありますか？バックエンドからデータを取得していることを確認しましたが、ここではレデューサーには送信されません。

以下は私のコンポーネントです

import React, { useState, useEffect, useRef } from "react";
import { useDispatch } from 'react-redux';

import {getBikeInfo} from  './features/counter/getInfo/getDetails.js'

function App() {
  const dispatch = useDispatch();

  const mapContainer = useRef(null);
  useEffect(() => {
    dispatch(getBikeInfo())
  }, [])

  useEffect(() =>{

  }, [])
  return (
    <div className="district-map-wrapper">
            <div id="districtDetailMap" className="map">
                <div style={{ height: "100%" }} ref={mapContainer}>

                </div>
            </div>
        </div>
  );
}

export default App;

以下は私のスライスです（サンク+レデューサーファイル）

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

export const getDetails = createSlice({
  name: "getInfo",
  initialState: {
    value: 0
  },
  reducers: {
    bikeParkingInfo: (state, action) => {
      console.log("something");
      console.log(state);
    },
    collisionDetailInfo: (state, action) => {
      state.value -= 1;
    }
  }
});

export const { bikeParkingInfo } = getDetails.actions;
export const getBikeInfo = (dispatch) => {
  return async (dispatch, getState) => {
    try {
      // make an async call in the thunk
      const bikeParking = await axios.get(
        "http://127.0.0.1:8000/getBikeParkingDetailsFromDb"
      );
      //console.log(bikeParking)
      // dispatch an action when we get the response back
      dispatch(bikeParkingInfo(bikeParking.payload));
    } catch (err) {
      // If something went wrong, handle it here
    }
  };
};
export default getDetails.reducer;