Вы обернули корневой компонент PersistGate? если нет, то вам нужно обернуть его, потому что он задерживает рендеринг пользовательского интерфейса вашего приложения до тех пор, пока ваше постоянное состояние не будет получено и сохранено в Redux. в противном случае ваше приложение загрузится до того, как состояние будет сохранено в хранилище Redux, поэтому вы получите неопределенное значение при попытке получить доступ к состоянию, поскольку оно не существует в хранилище.

Пожалуйста, перейдите по ссылке ниже, чтобы узнать больше https://www.npmjs.com/package/redux-persist#:~:text=If%20you%20are%20using%20react%2C%20wrap%20your%20root%20comComponent% 20with%20PersistGate.%20Это%20задерживает%20%20рендеринг%20из%20вашего%20приложения%27s%20UI%20до тех пор, пока%20ваше%20сохраняется%20состояние%20%20было%20получено%20и%20сохранено%20в%20редукс.%20NOTE%20the% 20PersistGate%20loading%20prop%20can%20be%20null%2C%20или

Во-первых, мне кажется, что произошла путаница в использовании RTK :)

В своем фрагменте, под клавишей reducers, вы заново изобретаете колесо extraReducer + createAsyncThunk.

1-е решение (не самое лучшее, по моему мнению): не используйте createAsyncThunk

Вы можете написать свое мнение так. Если вы выберете это решение, вы также можете удалить extraReducers. Проблема в том, что действие, отправленное createAsyncThunk, конфликтует с тем, которое вы определили.

export const getMenu = async ({ storeNumber, token }) => ({ dispatch }) => {
    try {
      dispatch(setLoading(true));
      const menu = await GetMenuApi(storeNumber, token);
      dispatch(setMenu(menu));
      dispatch(clearError());
      dispatch(setLoading(false));
    } catch (error) {
      dispatch(setError(error));
    }
  };

Второе решение: RTK для победы

Если вы проверите документ createAsyncThunk, вы увидите, что сгенерировано 3 действия => то, которое вы определили под ключом extraReducers. Но что еще более важно, menu/getMenu/pending отправляется сразу, когда отправляется переходник, и menu/getMenu/fulfilled, когда не было ошибки.

Имея это в виду, у вас есть конфликт

Итак, у нас будет следующий код

// Thunk is now super simple => put as much logic as possible in reducers ;)
// https://redux.js.org/style-guide/#put-as-much-logic-as-possible-in-reducers
export const getMenu = createAsyncThunk(
  "menu/getMenu",
  async ({ storeNumber, token }, { dispatch }) => {
      return await GetMenuApi(storeNumber, token);
  }
);

const menuSlice = createSlice({
  name: "menu",
  initialState,
  reducers: {
    clearMenu: (state) => {
      state.menu = null;
    },
  },
  extraReducers: (builder) => {
    // Tip : instead of string, you can pass the thunk.(pending|fulfilled|error)
    // in order to avoid typo
    builder
      .addCase(getMenu.pending, (state) => {
        state.loading = true;
      })
      .addCase(getMenu.fulfilled, (state, action) => {
        state.loading = false;
        // The `payload` is what was returned form the thunk
        state.menu = action.payload;
        
        // This was previously done by the `clearError` action
        state.error = null;
      })
      .addCase(getMenu.rejected, (state, action) => {
        state.loading = false;
        // If you don't use `rejectWithValue`, error will be under `error` key
        state.error = action.error;
      });
  },
});

Проблема

Ваше действие getMenu не возвращает никакого значения полезной нагрузки, поэтому действие setMenu отправляется, а состояние обновляется значением menu только для того, чтобы быть уничтожено действием getMenu.fulfilled, которое имеет неопределенное значение полезной нагрузки.

export const getMenu = createAsyncThunk(
  "menu/getMenu",
  async ({ storeNumber, token }, { dispatch }) => {
    try {
      dispatch(setLoading(true));
      const menu = await GetMenuApi(storeNumber, token);
      dispatch(setMenu(menu)); // (1) <-- has menu payload
      dispatch(clearError());
      dispatch(setLoading(false));
      // (2) <-- missing return implicitly returns undefined payload
    } catch (error) {
      dispatch(setError(error));
    }
  }
);

const menuSlice = createSlice({
  name: "menu",
  initialState,
  reducers: {
     setLoading: (state, action) => {
      state.loading = action.payload;
    },
    setError: (state, action) => {
      state.error = action.payload;
      state.loading = false;
    },
    setMenu: (state, action) => {
      state.menu = action.payload; // <-- (1) menu payload 🙂
      state.loading = false;
    },
    clearMenu: (state) => {
      state.menu = null;
    },
    clearError: (state) => {
      state.error = null;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase("menu/getMenu/pending", (state) => {
        state.loading = true;
      })
      .addCase("menu/getMenu/fulfilled", (state, action) => {
        state.loading = false;
        state.menu = action.payload; // (2) <-- undefined payload 🙁
      })
      .addCase("menu/getMenu/rejected", (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

Однако вы делаете больше работы для себя. Просто используйте действия thunk напрямую и убедитесь, что вы правильно возвращаете значения из действия getMenu.

Решение

Обновите getMenu, чтобы правильно вернуть меню как решенную/выполненную полезную нагрузку. Сделайте то же самое для ошибок.

Пример:

export const getMenu = createAsyncThunk(
  "menu/getMenu",
  ({ storeNumber, token }, { rejectWithValue }) => {
    try {
      return GetMenuApi(storeNumber, token); // <-- return menu payload
    } catch (error) {
      rejectWithValue(error); // <-- return rejection value
    }
  }
);

const menuSlice = createSlice({
  name: "menu",
  initialState,
  reducers: {
    ...
  },
  extraReducers: (builder) => {
    builder
      .addCase(getMenu.pending, (state) => {
        state.loading = true;
      })
      .addCase(getMenu.fulfilled, (state, action) => {
        state.loading = false;
        state.menu = action.payload; // <-- menu payload 😁
        state.error = null;
      })
      .addCase(getMenu.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload; // <-- menu fetch error
      });
  },
});

Асинхронные переходники следует использовать для обработки асинхронной логики, например вызовов API. Действия по диспетчеризации должны обрабатываться в разделе «extrareducers» среза, где вы определяете, как ваше состояние должно реагировать на различные действия.

 //Define the async thunk to fetch menuData
export const getMenu = createAsyncThunk(
  'menu/getMenu',
      async ((storeNumber, token), { dispatch }) => {
        // Async logic, API call
        try {
         const menu = await GetMenuApi(storeNumber, token);
          return menu; // Return data to be used in the reducer
        } catch (error) {
          throw error; // Re-throw the error to handle it in the rejected action
        }
      }
    );

//App.js
    const menuSlice = createSlice({
  name: 'menu',
  initialState,
  reducers: {
    // Add any synchronous actions here
  },
  extraReducers: (builder) => {
    builder
      .addCase(getMenu.pending, (state) => {
        state.loading = true;
        state.error = null; // Clear any existing error
      })
      .addCase(getMenu.fulfilled, (state, action) => {
        state.loading = false;
        state.menu = action.payload; // Update the state with the fetched data
      })
      .addCase(getMenu.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message; // Update the error state with the error message
      });
  },
});