Skip to content

Commit 4f8df01

Browse files
fazlulkarimwebfazlulkarimweb
committed
Version 2.00 Released
1 parent aea139d commit 4f8df01

File tree

8 files changed

+6216
-5579
lines changed

8 files changed

+6216
-5579
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
> **✅ Update:** 2.0.0 is launched with major updates (October 21, 2021). All packages are updated to the latest day. React 17+ and Next 11+ is added. Redux persist storage is reorganized. No breaking changes. Everything is tested. Thanks for your overwhelming love and support. ✌
2+
13
## Next Redux Wrapper along with Redux Persist (& redux-thunk too) - A ready boilerplate for NEXT JS projects with persistent global state ✨
24

35
I just needed a simple persistent global state for my Next.js website. This is a redux boilerplate and I wrote it for myself at first to speed up my future project. Now I added extensive comment to help people understanding the whole implementation.

‎package-lock.json‎

Lines changed: 6156 additions & 5548 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nextjs-ssr",
3-
"version": "1.0.0",
3+
"version": "2.0.0",
44
"description": "next-redux-wrapper-redux-thunk",
55
"main": "index.js",
66
"scripts": {
@@ -11,14 +11,14 @@
1111
"author": "MD FAZLUL KARIM",
1212
"license": "MIT",
1313
"dependencies": {
14-
"axios": "^0.19.2",
15-
"next": "^9.4.2",
16-
"next-redux-wrapper": "^6.0.0",
17-
"react": "^16.13.1",
18-
"react-dom": "^16.13.1",
19-
"react-redux": "^7.2.0",
20-
"redux": "^4.0.5",
21-
"redux-devtools-extension": "^2.13.8",
14+
"axios": "^0.23.0",
15+
"next": "^11.1.2",
16+
"next-redux-wrapper": "^7.0.5",
17+
"react": "^17.0.2",
18+
"react-dom": "^17.0.2",
19+
"react-redux": "^7.2.5",
20+
"redux": "^4.1.1",
21+
"redux-devtools-extension": "^2.13.9",
2222
"redux-persist": "^6.0.0",
2323
"redux-thunk": "^2.3.0"
2424
},

‎pages/_app.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import App from "next/app";
2-
import { wrapper } from "../store/store";
3-
import { useStore } from "react-redux";
4-
import { PersistGate } from "redux-persist/integration/react";
1+
import App from 'next/app';
2+
import { wrapper } from '../store/store';
3+
import { useStore } from 'react-redux';
4+
import { PersistGate } from 'redux-persist/integration/react';
55

66
function MyApp({ Component, pageProps }) {
77
const store = useStore((state) => state);

‎pages/_document.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import Document, { Head, Main, NextScript } from "next/document";
1+
import Document, { Html, Head, Main, NextScript } from 'next/document';
22

33
export default class MyDocument extends Document {
44
render() {
55
return (
6-
<html>
6+
<Html>
77
<Head></Head>
88
<body>
99
<Main />
1010
<NextScript />
1111
</body>
12-
</html>
12+
</Html>
1313
);
1414
}
1515
}

‎pages/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from "react";
2-
import { useSelector, useDispatch } from "react-redux";
3-
import { incrementCounter, decrementCounter } from "../store/counter/action";
4-
import Link from "next/link";
1+
import React from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
import { incrementCounter, decrementCounter } from '../store/counter/action';
4+
import Link from 'next/link';
55

66
function counter() {
77
const globalState = useSelector((state) => state.counter.counter);
@@ -13,7 +13,7 @@ function counter() {
1313
<button onClick={() => dispatch(incrementCounter(globalState))}>
1414
Increment +
1515
</button>
16-
{" "}
16+
{' '}
1717
<button onClick={() => dispatch(decrementCounter(globalState))}>
1818
Decrement -
1919
</button>

‎store/store.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import { createStore, applyMiddleware, combineReducers } from "redux";
2-
import { createWrapper, HYDRATE } from "next-redux-wrapper";
3-
import thunkMiddleware from "redux-thunk";
4-
import counter from "./counter/reducer";
1+
import { createStore, applyMiddleware, combineReducers } from 'redux';
2+
import { createWrapper, HYDRATE } from 'next-redux-wrapper';
3+
import thunkMiddleware from 'redux-thunk';
4+
import counter from './counter/reducer';
5+
import storage from './sync_storage';
6+
// If you don't bother about the error redux-persist failed to create sync storage. falling back to noop storage...uncomment the next line and comment out the previous import. See more on - https://github.com/vercel/next.js/discussions/15687
7+
// const storage = require('redux-persist/lib/storage').default;
58

69
//COMBINING ALL REDUCERS
710
const combinedReducer = combineReducers({
@@ -11,8 +14,8 @@ const combinedReducer = combineReducers({
1114

1215
// BINDING MIDDLEWARE
1316
const bindMiddleware = (middleware) => {
14-
if (process.env.NODE_ENV !== "production") {
15-
const { composeWithDevTools } = require("redux-devtools-extension");
17+
if (process.env.NODE_ENV !== 'production') {
18+
const { composeWithDevTools } = require('redux-devtools-extension');
1619
return composeWithDevTools(applyMiddleware(...middleware));
1720
}
1821
return applyMiddleware(...middleware);
@@ -24,12 +27,14 @@ const makeStore = ({ isServer }) => {
2427
return createStore(combinedReducer, bindMiddleware([thunkMiddleware]));
2528
} else {
2629
//If it's on client side, create a store which will persist
27-
const { persistStore, persistReducer } = require("redux-persist");
28-
const storage = require("redux-persist/lib/storage").default;
30+
const { persistStore, persistReducer } = require('redux-persist');
31+
// If you bother about the error redux-persist failed to create sync storage. falling back to noop storage....comment the next line and uncomment the second line. See more on - https://github.com/vercel/next.js/discussions/15687 Though it's a unresolved issue in many instances.
32+
// const storage = require('redux-persist/lib/storage').default;
33+
// const storage = require('./sync_storage');
2934

3035
const persistConfig = {
31-
key: "nextjs",
32-
whitelist: ["counter"], // only counter will be persisted, add other reducers if needed
36+
key: 'nextjs',
37+
whitelist: ['counter'], // only counter will be persisted, add other reducers if needed
3338
storage, // if needed, use a safer storage
3439
};
3540

‎store/sync_storage.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
2+
3+
const createNoopStorage = () => {
4+
return {
5+
getItem(_key) {
6+
return Promise.resolve(null);
7+
},
8+
setItem(_key, value) {
9+
return Promise.resolve(value);
10+
},
11+
removeItem(_key) {
12+
return Promise.resolve();
13+
},
14+
};
15+
};
16+
17+
const storage =
18+
typeof window !== 'undefined'
19+
? createWebStorage('local')
20+
: createNoopStorage();
21+
22+
export default storage;

0 commit comments

Comments
 (0)