Question

我正在尝试在SSR应用程序中使用redux-persist 5.10.0实现redux 4.0.0，并且遇到了一个问题，即我无法在没有应用崩溃的情况下正确地为createStore()提供预加载状态。

发生的事情是，应用程序从服务器加载了初始状态，但是当应用程序尝试在客户端上的createStore()中预加载状态时，应用程序刷新并崩溃。我认为是因为我的preloadedState格式不正确...？但是我不确定，因为在控制台，UI，nada中没有收到任何错误消息。

以下是一些相关代码：

store / index.js

export default function configureStore(preloadedState = {}) {
    // This will store our enhancers for the store
    const enhancers = [];

    // Add thunk middleware
    const middleware = [thunk];

    // Apply middlware and enhancers
    const composedEnhancers = compose(
        applyMiddleware(...middleware),
        ...enhancers
    );

    // Set up persisted and combined reducers
    const persistedReducer = persistReducer(persistConfig, rootReducer);

    // Create the store with the persisted reducers and middleware/enhancers
    const store = createStore(persistedReducer, preloadedState, composedEnhancers);

    const persistor = persistStore(store, null, () => {
        store.getState(); // if you want to get restoredState
    });

    return { store, persistor };
}

index.js

const preloadedState = window.__PRELOADED_STATE__ ? window.__PRELOADED_STATE__ : {};
delete window.__PRELOADED_STATE__;

// Create redux store
const { persistor, store } = configureStore(preloadedState);

// Get app's root element
const rootEl = document.getElementById("root");

// Determine if we should use hot module rendering or DOM hydration
const renderMethod = !!module.hot ? ReactDOM.render : ReactDOM.hydrate;

renderMethod(
    <Provider store={store}>
        <PersistGate loading={<Loader />} persistor={persistor}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </PersistGate>
    </Provider>,
    rootEl
);

在客户端上，一切仍然存在，但尚无任何发展，但是当我测试SSR时，应用会加载，然后重新加载并变为空白。重新加载使我认为状态不会因相同的数据而变得水合。它完全崩溃了，此刻我感到困惑。

任何想法如何进行？

编辑

经过一些老式的调试之后，我发现删除<PersistGate loading={<Loader />} persistor={persistor}>行将允许应用程序最初加载，并且可以通过服务器按预期方式加载内容，但是数据不能正确保存（显然）

我使用PersistGate组件的方式有什么问题吗？

窗口。__PRELOADED_STATE __

{
    user: {…}, banners: {…}, content: {…}, locations: {…}, news: {…}, …}
    banners: {isLoading: 0, banners: Array(2)}
    content: {isLoading: 0, errors: {…}, data: {…}}
    locations: {countries: Array(0), provinces: Array(0), default_country: null, isLoading: false, error: null, …}
    news: {isLoading: 0, hasError: 0}
    phoneTypes: {isLoading: false}
    profileStatuses: {isLoading: false}
    profileTypes: {isLoading: false}
    reviewers: {isLoading: false}
    route: {}
    salutations: {isLoading: false}
    sectors: {isLoading: false, sectors: Array(0)}
    siteInfo: {pageTitle: "", isLoading: 0, hasError: 0, error: "", site: {…}, …}
    sort: {value: "", dir: ""}
    user: {isLoading: false, loginChecked: {…}, admin: null, reviewer: null, loginTokenLoading: false, …}
    _persist: {version: -1, rehydrated: true}
    __proto__: Object
}

Answer 1

我知道这是一个非常老的问题，但这是针对像我这样仍在寻求解决此问题的人的！（P.S.我浪费了我两天时间才找到解决方案！）

在将Redux-persist与SSR一起使用时，它会导致崩溃，并出现诸如1-5秒的白屏，然后显示页面之类的问题。

这是持久+水合物的问题，要解决此问题，请尝试以下解决方案。：）

删除Redux-persist。大声笑只是在开玩笑！
删除<PersistGate>并使用下面的代码

代码

function Main() {
   return (
       <Provider store={store}>
         // Don't use <PersistGate> here.
         <Router history={history}>
            { Your other code }
         </Router>
       </Provider>
   );
}

persistor.subscribe(() => {
   /* Hydrate React components when persistor has synced with redux store */
   const { bootstrapped } = persistor.getState();

   if (bootstrapped) {
      ReactDOM.hydrate(<Main />, document.getElementById("root"));
   }
});

这是一个可行的解决方案！我已经解决了这个问题！希望对别人有帮助。

Answer 2

我在NextJs中使用以下设置进行此工作。

当未在服务器上定义窗口时，我将在没有PersistGate的情况下渲染应用程序。

要求存储配置不占用存储空间，这是我根据传递的属性确定的。

class MyApp extends App {
  public render() {
    const { Component, pageProps } = this.props;
    if (typeof window === "undefined") {
      const { store } = configureStore();
      return (
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      );
    }
    const { store, persistor } = configureStore(storage);

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

export default MyApp;

const configureStore = (passedStorage?: AsyncStorage | WebStorage) => {
  const combinedReducers = combineReducers({
    conjugations: conjugationReducer
  });
  if (!passedStorage) {
    const store = createStore(combinedReducers);
    return { store };
  }

  const persistConfig = {
    key: "root",
    storage: passedStorage
  };
  const persistedReducer = persistReducer(persistConfig, combinedReducers);

  const store = createStore(
    persistedReducer
  );
  const persistor = persistStore(store);
  return { store, persistor };
};

Answer 3

以下对我有用的解决方案-

已经在商店中定义了所有动作和化约器-无需使用redux-persist。公开以reducer为参数的createStore方法。
在服务器上，导入商店中定义的化简器并创建商店renderToString（）。
在客户端上，导入相同的reducer，使用'storage'创建一个持久化的reducer（请注意，'storage'在服务器上不起作用，因此我们只能在客户端中导入它）。另外，使用从服务器发送的redux状态创建存储，此持久化的reducer。现在，持久存储该存储，并使用该存储（在Provider中）和持久器（在PersistGate中）

对我来说，如果我要保留的所有变量都是组件的一部分，那么它将很好地工作。您可以使用对服务器的后调用（使用组件内的{axios}）来管理其他变量。

检查此仓库以创建没有redux-persist的商店-之后执行上述步骤-https://github.com/alexnm/react-ssr/tree/fetch-data

将redux与redux-persist与服务器端渲染一起使用

3 个答案: