Nextjs Redux getState 未定义

Question

嗨，我在 Nextjs 有一个简单的项目。我想获得 redux 商店的状态，但是当我尝试使用 store.getState 时，它会抛出一个未定义的 error getState。我有一个简单的 vinalla javascript 文件，我也想在该文件中使用getState。我该怎么做。

//store.js

import { useMemo } from "react";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { rootReducer } from "./reducer";
import { exampleInitialState } from "./reducer";
let store;

const persistConfig = {
  key: "primary",
  storage,
  whitelist: ["exampleData", "count"], // place to select which state you want to persist
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

function makeStore(initialState = exampleInitialState) {
  return createStore(
    persistedReducer,
    initialState,
    composeWithDevTools(applyMiddleware())
  );
}

export const initializeStore = (preloadedState) => {
  let _store = store ?? makeStore(preloadedState);

  // After navigating to a page with an initial Redux state, merge that state
  // with the current state in the store, and create a new store
  if (preloadedState && store) {
    _store = makeStore({
      ...store.getState(),
      ...preloadedState,
    });
    // Reset the current store
    store = undefined;
  }

  // For SSG and SSR always create a new store
  if (typeof window === "undefined") return _store;
  // Create the store once in the client
  if (!store) store = _store;

  return _store;
};

export function useStore(initialState) {
  const store = useMemo(() => initializeStore(initialState), [initialState]);
  return store;
}

//_app.js

import { useStore } from '../store'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)
  const persistor = persistStore(store, {}, function () {
    persistor.persist()
  })

  return (
    <Provider store={store}>
      <PersistGate loading={<div>loading</div>} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  )
}

vinall.js - 我如何在这个文件中使用store.getState

import React from "react";
import { useStore } from "../store";
function vanilla() {
  
  return <div>i m vanilla js file</div>;
}

export default vanilla;

//也在这个文件中

import { useStore } from "../store";
function simplejs() {
  
  let state=useStore.getState();
  return state.tods;
}

Answer 1

要访问您的 redux 商店，您可以从 react-redux 导入 useSelector 钩子并像这样使用它：

const yourStateProp = useSelector((state) => state.yourStateProp);