fazlulkarimweb / with-next-redux-wrapper-redux-persist Goto Github PK
View Code? Open in Web Editor NEWA counter app(or boilerplate) with next redux wrapper, redux persist and redux thunk for your NEXT JS website.
A counter app(or boilerplate) with next redux wrapper, redux persist and redux thunk for your NEXT JS website.
html is missing in ssr
only show
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'
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?
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 ?
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!
This error happens when building the project with typescript
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
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?
Any alternative way aside of createStore? This is depreciated
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.