Javascript 从函数内部访问 redux 存储会导致非持久状态 RTK

不清楚您到底在对specific个Store实例做什么，但根据您所展示的代码，您已经实例化了103个两个不同的Store对象.一个是在创建persistor时，另一个是在将存储传递给react-redux Provider组件时.

Store.js

export default function setupStore (preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
        }
      }).concat(logger),
  });
  return store;
}

export const persistor = persistStore(setupStore()); // <-- store instance #1

Index.js

root.render(
  <Provider store={setupStore()}> // <-- store instance #2
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);

要解决这个问题，您只需要实例化一个应用程序中使用的store 实例.

您可以导出setupStore函数以用于测试/ETC，然后还可以导出实例化的store和persistor:

Store.js

export default function setupStore (preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
        }
      }).concat(logger),
  });
  return store;
}

export const store = setupStore(); // <-- store instance

export const persistor = persistStore(store); // <-- store instance passed in

Index.js

root.render(
  <Provider store={store}> // <-- same store instance
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}> // <-- also used here
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);

Or you can just export the setupStore utility and instantiate the store and persistor in the Index.js file.

Store.js

export default function setupStore (preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
        }
      }).concat(logger),
  });
  return store;
}

Index.js

const store = setupStore(); // <-- instantiate store
const persistor = persistStore(store); // <-- pass store instance

root.render(
  <Provider store={store}> // <-- same store instance
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}> // <-- also used here
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);