Использование redux с redux-persist с рендерингом на стороне сервера

Когда вы используете Redux-persist с SSR, это создает сбои, такие проблемы, как он показывает вам белый экран в течение 1-5 секунд, а затем показывает страницу.

Это проблема Persist + Hydrate. Чтобы решить ее, попробуйте следующее решение. :)

1. Удалите Redux-persist. Лол, шучу!
2. Удалите <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"));
   }
});

У меня это работает со следующей настройкой в ​​​​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 };
};

Одно решение, которое сработало для меня, заключается в следующем:

• Определите все действия и редукторы в хранилище — без использования redux-persist. Предоставьте метод createStore, который принимает редюсер в качестве аргумента.
• На сервере импортируйте редукторы, определенные в хранилище, и создайте хранилище, renderToString().
• На клиенте импортируйте те же редукторы, создайте постоянный редюсер, используя «хранилище» (обратите внимание, что «хранилище» не работает на сервере, поэтому мы должны импортировать его только в клиенте). Кроме того, создайте хранилище, используя состояние редукции, отправленное с сервера, и этот постоянный редуктор. Теперь сохраните это хранилище и используйте это хранилище (в провайдере) и сохранятель (в PersistGate).

Для меня это работает хорошо, если все переменные, которые я пытаюсь сохранить, являются частью компонентов. Другими переменными вы можете управлять с помощью почтовых вызовов на сервер (используя {axios} внутри компонентов).

Проверьте этот репозиторий на предмет создания хранилища без избыточного сохранения — после этого выполните описанные выше шаги — https://github.com/alexnm/react-ssr/tree/fetch-data

// in client.js
import {createStore as createPersistedStore} from 'redux';
import createStore, { reducers } from './store';
const persistConfig = {
  key: 'app',
  storage,
}

const persistedReducers = persistReducer(persistConfig, reducer);
// creating a persisting store in client.js only
const store = createStore(persistedReducers, window.REDUX_DATA);
const persistor = persistStore(store);

const jsx = (
  <ReduxProvider store={store}>
    <PersistGate loading={"loading from store"} persistor={persistor}>
      <Router>
        <App />
      </Router>
    </PersistGate>
  </ReduxProvider>
);

const app = document.getElementById("app");
ReactDOM.hydrate(jsx, app);
// end client.js


// in server.js - only see createStore as well as const jsx object, and a dummy context
import createStore, { reducers } from './store';
const app = express()
app.get( "/*", (req, res, next) => {
  const context = {};
  // not created using persisted store in the server - don't have to
  const store = createStore(reducer);
  // define data with the routes you need (see the github repo)
  Promise.all(data).then(() => {
    const jsx = (
        <ReduxProvider store={store}>
            <StaticRouter context={context} location={req.url}>
                <App />
            </StaticRouter>
        </ReduxProvider>
    );
    const reactDom = renderToString(jsx);
    const reduxState = store.getState();
    // more code for res.end
  });
});
// end server.js

// in store.js
import {createStore, combineReducers, applyMiddleware} from "redux";
// your actions and reducers
export const reducer = combineReducers({
  // reducers
)};
export default (reducerArg, initialState) =>
  createStore(reducerArg,initialState);
// end store.js