fazlulkarimweb / with-next-redux-wrapper-redux-persist Goto Github PK

If i use PersistGate in the _app.js like the following manner then the terminal says "redux-persist failed to create sync storage. falling back to noop storage."

        <PersistGate loading={<div>loading</div>} persistor={store.__persistor}>
          <Component {...pageProps} />
        </PersistGate>

However it's easy to fix :

      <Provider` store={store}>
        <PersistGate loading={<div>loading</div>} persistor={store.__persistor}>
          <Component {...pageProps} />
        </PersistGate>
      </Provider>

And here is the files i am importing in the _app.js

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

When i run the project

npm: 8.1.2
node: 16.13.0

Thanks for your boilerplate, it's helped me quite a bit.

One thing I'm not certain of is how to leverage the persistor manually.

It's applied as a key onto the store object that's return part of the makeStore method like so: store.__persistor.

I ended up doing this in my _app instead:

const store = useStore();
const persistor = persistStore(store);

but both of our solutions don't provide access to the __persistor value when I want to do something like persistor.flush().

Any ideas?

This error happens when building the project with typescript

html is missing in ssr
only show

As we we know, most of the bleeding of using NextJS is using it's SSR feature to handle SEO.
But this config removes data on start and shows a loading... of Redux persistor.

What is expected?
Show real data instead of loading when you open a page at first.

When i use this with typescript i need to add any type everywhere? could you please add an example with typescript ?

The only thing i did is upgrading all dependencies to latest dependencies and this is happen

Any alternative way aside of createStore? This is depreciated

i want get current state in getServerSideProps like this:

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
  let {counter} = store.getState();
    const data = await fetchData();
    return { props: data };
  }
);

But it always return initialState:

{ server: '', client: '', counter: 0 }

My code in reducer:

  switch (action.type) {
    case INCREMENT_COUNTER:
      return { ...state, counter: action.payload };
    case DECREMENT_COUNTER:
      return { ...state, counter: action.payload };
    case HYDRATE:
      return { ...state, ...action.payload.counter };
    default:
      return state;
  }
}

How can do that?

I think that adding redux toolkit example on the separate branch would be great
link to example:
https://github.com/samipshah100/with-next-redux-wrapper-redux-persist/blob/master/README.md

Hello, my code is returning this flaw mentioned in the title, I did it according to the README model, but it's as if the store was in trouble. Can anyone give a hand?

store/index.js

import { createStore, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { createWrapper } from 'next-redux-wrapper';
import storage from 'redux-persist/lib/storage';

import modal from '../reducers/modal';
import cart from '../reducers/cart';

const reducer = combineReducers({
  modal,
  cart,
});

const makeConfiguredStore = (reducer) =>
  createStore(reducer, undefined);

const makeStore = () => {
  const isServer = typeof window === 'undefined';

  if (isServer) {
    return makeConfiguredStore(reducer);
  }
  
  const persistConfig = {
    key: 'root',
    storage,
  };

  const persistedReducer = persistReducer(persistConfig, reducer);
  const store = makeConfiguredStore(persistedReducer);
  store.__persistor = persistStore(store);

  return store;
};

const persistor = persistStore(makeStore);

const wrapper = createWrapper(makeStore);

export {
  persistor,
  wrapper,
}

_app.js

import App from 'next/app';
import { ReactReduxContext } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react';
import { ThemeProvider } from 'styled-components';

import { wrapper } from '../store';
import baseTheme from '../utils/theme';

class MainApp extends App {
	render() {
		const { Component, pageProps } = this.props;
		return (
			<ReactReduxContext.Consumer>
				{({ store }) => {
					<PersistGate persistor={store.__persistor} loading={null}>
						<ThemeProvider theme={baseTheme}>
							<Component {...pageProps} />
						</ThemeProvider>
					</PersistGate>
				}}
			</ReactReduxContext.Consumer>
		);
	}
}

export default wrapper.withRedux(MainApp);

Hi! i found this boilerplate facing the same issue that a lot of people has. This wrapper works but SSR its not working, there is a workaround with this issue? Thanks in advance!

As reported in this issue: #8

The main issue with using Redux and Redux-persist with Next.js is still not solved.

Steps to reproduce:

1. Download this repo
2. Run npm install && npm run dev
3. Open chrome and disable Javascript in the browser (or view source)
4. See a white screen (no content loaded == not good for SEO)