Как сохранить данные о избыточном состоянии в Next.js? - PullRequest
Новая
       15

Как сохранить данные о избыточном состоянии в Next.js?

0 голосов
/ 04 января 2019

Я недавно настроил редукс с моим проектом Next.js, теперь я имею дело с сохраняющимися редукционными данными, так что на каждом обновлении страницы я могу иметь постоянное состояние. Поэтому я добавил redux-persist для обработки этого сценария, так как это лучшее решение с response-redux, но я не знаю, почему он не работает здесь в next.js с next-redux-wrapper или с библиотекой Redux. Так что, пожалуйста, помогите мне с этой проблемой, существует ли что-то вроде redux-persist? (Хотя я не хочу решения cookie), если да, то, пожалуйста, предложите мне ссылки с примерами, это будет действительно полезно. Заранее спасибо ...

На самом деле я пытался сохранить состояние избыточности после каждого обновления страницы, поэтому я также использовал redux-persist с next-redux-wrapper, но я получаю ошибки

/ store.js 

    import { createStore, applyMiddleware } from 'redux'
    import { composeWithDevTools } from 'redux-devtools-extension'
    import thunkMiddleware from 'redux-thunk'
    import { persistReducer } from 'redux-persist';
    import storage from 'redux-persist/lib/storage';

    const persistConfig = {
      timeout: 0,
      key: 'root',
      storage,
    };
    const persistedReducer = persistReducer(persistConfig, reducer);

    export default () => {
      return createStore(persistedReducer,
        composeWithDevTools(
          applyMiddleware(
            thunkMiddleware
          )
        ));
    };

/ _ app.js 

    import App, { Container } from 'next/app'
    import React from 'react'
    import { Provider } from 'react-redux'
    import withRedux from 'next-redux-wrapper';
    import { PersistGate } from 'redux-persist/integration/react';
    import { persistStore } from 'redux-persist';
    import store from '../store';

    class MyApp extends App {
      static async getInitialProps ({Component, ctx}) {
        return {
          pageProps: (Component.getInitialProps ? await Component.getInitialProps(ctx) : {})
        };
      }

      render () {
        const { Component, pageProps, reduxStore } = this.props;
        const persistor = persistStore(store);
        return (
          <Container>
            <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <Component {...pageProps} />
              </PersistGate>
            </Provider>
          </Container>
        )
      }
    }

Я ожидаю, что это сохранит состояние, но я получаю ошибку, подобную этой: "redux-persist не удалось создать хранилище синхронизации. Откат к хранилищу памяти. Тип ошибки: baseReducer не является функцией"

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

В настоящее время я работаю над созданием приложения для рендеринга на стороне сервера с реакцией, застрял с использованием redux-persist со следующими js и нашел этот отличный стартер! Вы обязательно должны проверить это https://github.com/zeit/next.js/tree/canary/examples/with-redux-persist

0 голосов
/ 06 января 2019

Почему бы вам не следовать рекомендованному примеру из next.js github.

https://github.com/zeit/next.js/tree/canary/examples/with-redux

Вы должны экспортировать свой класс _app с redux-persist

...