我已使用MSAL-React实现了OAuth（Microsoft身份验证以启用SSO）。我希望从MSAL获取的accessToken可以跨页面访问。因此，我想到使用redux来存储accessToken。然而，我可以在几次刷新后从redux存储中检索accessToken。为了解决这个问题，我了解到，我必须使用中间件。我已经尝试使用中间件。我的我不断得到这个错误
网络包错误：根缩减器应为函数。但收到：'未定义'
请让我知道我哪里做错了
store.js

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './rootReducer'

const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware))

// The store now has the ability to accept thunk functions in `dispatch`
const store = createStore(rootReducer, composedEnhancer)
export default store

rootReducer.js

import { fetchUsersToken, reducer } from "./reducer";

import { combineReducers } from "redux";

 //as we have only one reducer , if we have multiple reducer then we can import and add 
 below to current reducer

 //previously I have given like "export const rootReducer = combineReducers({...})"
 export const rootReducer = () => combineReducers({ 
    reduxState: reducer
  });

reducer.js

import { useMsal } from "@azure/msal-react";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { loginRequest } from "./authConfig";
import { msalInstance } from "./pages";
import * as actionTypes from "./action-types";

const initialState = []

export default function reducer(state = initialState, action) {
  switch (action.type) {
// omit other reducer cases
case actionTypes.GETTOKEN: {
  // Replace the existing state entirely by returning the new value
  return action.payload
}
default:
  return state
}
}

export const fetchUsersToken = createAsyncThunk("users/fetchUsersToken", async 
(dispatch, getState) => {
 const {accounts} = useMsal()
 const request = {
 ...loginRequest,
 account: accounts[0],
 }
 const tkn = await msalInstance.acquireTokenSilent(request)
 dispatch({ type: actionTypes.GETTOKEN, payload: tkn.accessToken })
  });

index.js

import React from "react"
import { Helmet } from "react-helmet"
import { PublicClientApplication } from "@azure/msal-browser"
import { MsalProvider } from "@azure/msal-react"
import { msalConfig } from "../authConfig"
import PageLayout from "./PageLayout"
import { createTheme, ThemeProvider } from "@mui/material/styles"

//Redux
 import { Provider } from "react-redux";
 import {store} from "../store";

 store.dispatch(fetchUsersToken());

 //Redux Ends here
 export const msalInstance = new PublicClientApplication(msalConfig)

 //For changing default blue color for mui text-fields
 const theme = createTheme({
  palette: {
   primary: { main: "#000000" },
   },
   })

   export default function Home() {
   return (
    <>
  <Helmet>
    <title>XXXXXXXXXX</title>
  </Helmet>
  <MsalProvider instance={msalInstance}>
    <ThemeProvider theme={theme}>
    <Provider store={store}>
      <PageLayout />
      </Provider>
    </ThemeProvider>
  </MsalProvider>
</>
 )
  }