First Commit

fazlulkarimweb · fazlulkarimweb · commit 739aea270544 · 2020-05-30T16:06:33.000+06:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.next
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "nextjs-ssr",
+  "version": "1.0.0",
+  "description": "next-redux-wrapper-redux-thunk",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "author": "MD FAZLUL KARIM",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.19.2",
+    "next": "^9.4.2",
+    "next-redux-wrapper": "^6.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/node": "^7.8.7",
+    "@babel/preset-env": "^7.9.6"
+  }
+}
diff --git a/pages/_app.js b/pages/_app.js
@@ -0,0 +1,15 @@
+import App from "next/app";
+import { wrapper } from "../store/store";
+import { useStore } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
+
+function MyApp({ Component, pageProps }) {
+  const store = useStore((state) => state);
+  return (
+    <PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
+      <Component {...pageProps} />
+    </PersistGate>
+  );
+}
+
+export default wrapper.withRedux(MyApp);
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,15 @@
+import Document, { Head, Main, NextScript } from "next/document";
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <html>
+        <Head></Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}
diff --git a/pages/counter/index.js b/pages/counter/index.js
@@ -0,0 +1,32 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { incrementCounter, decrementCounter } from "../../store/counter/action";
+
+const Users = ({ users, error }) => {
+  const globalState = useSelector((state) => state.counter.counter);
+  const dispatch = useDispatch();
+
+  return (
+    <section>
+      <h1>GLOBAL COUNTER {globalState}</h1>
+      <button onClick={() => dispatch(incrementCounter(globalState))}>
+        Increment +
+      </button>
+      {"  "}
+      <button onClick={() => dispatch(decrementCounter(globalState))}>
+        Decrement -
+      </button>
+      <br />
+
+      <p>
+        Try to reload this page or open a new tab or view this page another
+        time.
+        <br />
+        You will see the same value everytime. Because the global state is
+        persistent and saved in the localstorage
+      </p>
+    </section>
+  );
+};
+
+export default Users;
diff --git a/pages/index.js b/pages/index.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { incrementCounter, decrementCounter } from "../store/counter/action";
+import Link from "next/link";
+
+function counter() {
+  const globalState = useSelector((state) => state.counter.counter);
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <h1>GLOBAL COUNTER {globalState}</h1>
+      <button onClick={() => dispatch(incrementCounter(globalState))}>
+        Increment +
+      </button>
+      {"  "}
+      <button onClick={() => dispatch(decrementCounter(globalState))}>
+        Decrement -
+      </button>
+      <br />
+      <br />
+      <p>
+        Try to reload this page or open a new tab
+        <br />
+        or view this page another time.
+        <br />
+        You will see the same value everytime.
+        <br />
+        Because the global state is persistent
+        <br />
+        and saved in the localstorage.
+      </p>
+
+      <Link href="/counter">
+        <a>Go to Counter Page</a>
+      </Link>
+      <br />
+      <Link href="/ssg">
+        <a>Go to a getStaticProps used page</a>
+      </Link>
+      <br />
+      <Link href="/ssr">
+        <a>Go to a getServerSideProps used Page</a>
+      </Link>
+    </>
+  );
+}
+
+export default counter;
diff --git a/pages/ssg/index.js b/pages/ssg/index.js
@@ -0,0 +1,80 @@
+import React from "react";
+import axios from "axios";
+import { useSelector, useDispatch } from "react-redux";
+import { incrementCounter, decrementCounter } from "../../store/counter/action";
+
+const Users = ({ users, error }) => {
+  const globalState = useSelector((state) => state.counter.counter);
+  const dispatch = useDispatch();
+
+  return (
+    <section>
+      <h1>GLOBAL COUNTER: {globalState}</h1>
+      <button onClick={() => dispatch(incrementCounter(globalState))}>
+        Increment +
+      </button>
+      {"  "}
+      <button onClick={() => dispatch(decrementCounter(globalState))}>
+        Decrement -
+      </button>
+      <br />
+      <p>
+        Try to reload this page or open a new tab or view this page another
+        time.
+        <br />
+        You will see the same value everytime. Because the global state is
+        persistent and saved in the localstorage
+      </p>
+      <header>
+        <h1>An External API Call</h1>
+        <p>
+          just to show how next redux wrapper works with getStaticProps based
+          Static Site Generation.
+        </p>
+      </header>
+      {error && <div>There was an error.</div>}
+      {!error && users && (
+        <table>
+          <thead>
+            <tr>
+              <th>Username</th>
+              <th>Email</th>
+              <th>Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user, key) => (
+              <tr key={key}>
+                <td>{user.username}</td>
+                <td>{user.email}</td>
+                <td>{user.name}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </section>
+  );
+};
+
+const fetchData = async () =>
+  await axios
+    .get("https://jsonplaceholder.typicode.com/users")
+    .then((res) => ({
+      error: false,
+      users: res.data,
+    }))
+    .catch(() => ({
+      error: true,
+      users: null,
+    }));
+
+export const getStaticProps = async () => {
+  const data = await fetchData();
+
+  return {
+    props: data,
+  };
+};
+
+export default Users;
diff --git a/pages/ssr/index.js b/pages/ssr/index.js
@@ -0,0 +1,75 @@
+import React from "react";
+import axios from "axios";
+import { useSelector, useDispatch } from "react-redux";
+import { incrementCounter, decrementCounter } from "../../store/counter/action";
+
+const fetchData = async () =>
+  await axios
+    .get("https://jsonplaceholder.typicode.com/users")
+    .then((res) => ({
+      error: false,
+      users: res.data,
+    }))
+    .catch(() => ({
+      error: true,
+      users: null,
+    }));
+
+const Users = ({ users, error }) => {
+  const globalState = useSelector((state) => state.counter.counter);
+  const dispatch = useDispatch();
+  return (
+    <section>
+      <header>
+        <h1>GLOBAL COUNTER: {globalState}</h1>
+        <button onClick={() => dispatch(incrementCounter(globalState))}>
+          Increment +
+        </button>
+        {"  "}
+        <button onClick={() => dispatch(decrementCounter(globalState))}>
+          Decrement -
+        </button>
+        <br />
+        <strong>
+          Try to reload this page or open a new tab or view this page another
+          time.
+          <br />
+          You will see the same value everytime. Because the global state is
+          persistent and saved in the localstorage
+        </strong>
+        <h1>List of users (An external api call with getServerSideProps)</h1>
+      </header>
+      {error && <div>There was an error.</div>}
+      {!error && users && (
+        <table>
+          <thead>
+            <tr>
+              <th>Username</th>
+              <th>Email</th>
+              <th>Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user, key) => (
+              <tr key={key}>
+                <td>{user.username}</td>
+                <td>{user.email}</td>
+                <td>{user.name}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </section>
+  );
+};
+
+export const getServerSideProps = async () => {
+  const data = await fetchData();
+
+  return {
+    props: data,
+  };
+};
+
+export default Users;
diff --git a/public/Homepage.gif b/public/Homepage.gif
diff --git a/public/Next_Build.png b/public/Next_Build.png
diff --git a/public/_appjs.png b/public/_appjs.png
diff --git a/public/how it works.png b/public/how it works.png
diff --git a/public/next app wrapper.png b/public/next app wrapper.png
diff --git a/store/counter/action.js b/store/counter/action.js
@@ -0,0 +1,19 @@
+import { INCREMENT_COUNTER, DECREMENT_COUNTER } from "./type";
+
+export const incrementCounter = (incrementState) => (dispatch) => {
+  const increase = incrementState + 1;
+
+  return dispatch({
+    type: INCREMENT_COUNTER,
+    payload: increase,
+  });
+};
+
+export const decrementCounter = (decrementState) => (dispatch) => {
+  const decrease = decrementState - 1;
+
+  return dispatch({
+    type: DECREMENT_COUNTER,
+    payload: decrease,
+  });
+};
diff --git a/store/counter/reducer.js b/store/counter/reducer.js
@@ -0,0 +1,19 @@
+import { INCREMENT_COUNTER, DECREMENT_COUNTER } from "./type";
+
+const initialState = {
+  server: "",
+  client: "",
+  counter: 0,
+};
+
+// Creating my reducer
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+    case INCREMENT_COUNTER:
+      return { ...state, counter: action.payload };
+    case DECREMENT_COUNTER:
+      return { ...state, counter: action.payload };
+    default:
+      return state;
+  }
+}
diff --git a/store/counter/type.js b/store/counter/type.js
@@ -0,0 +1,2 @@
+export const INCREMENT_COUNTER = "incrementCounter";
+export const DECREMENT_COUNTER = "decrementCounter";
diff --git a/store/store.js b/store/store.js
@@ -0,0 +1,47 @@
+import { createStore, applyMiddleware, combineReducers } from "redux";
+import { createWrapper, HYDRATE } from "next-redux-wrapper";
+import thunkMiddleware from "redux-thunk";
+import counter from "../store/counter/reducer";
+
+//COMBINING ALL REDUCERS
+const combinedReducer = combineReducers({
+  counter,
+  // OTHER REDUCERS WILL BE ADDED HERE
+});
+
+// BINDING MIDDLEWARE
+const bindMiddleware = (middleware) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { composeWithDevTools } = require("redux-devtools-extension");
+    return composeWithDevTools(applyMiddleware(...middleware));
+  }
+  return applyMiddleware(...middleware);
+};
+
+const makeStore = ({ isServer }) => {
+  if (isServer) {
+    //If it's on server side, create a store simply
+    return createStore(combinedReducer, bindMiddleware([thunkMiddleware]));
+  } else {
+    //If it's on client side, create a store with a persistability feature
+    const { persistStore, persistReducer } = require("redux-persist");
+    const storage = require("redux-persist/lib/storage").default;
+
+    const persistConfig = {
+      key: "nextjs",
+      whitelist: ["counter"], // make sure it does not clash with server keys
+      storage,
+    };
+
+    const persistedReducer = persistReducer(persistConfig, combinedReducer);
+    const store = createStore(
+      persistedReducer,
+      bindMiddleware([thunkMiddleware])
+    );
+    store.__persistor = persistStore(store);
+    return store;
+  }
+};
+
+// export an assembled wrapper
+export const wrapper = createWrapper(makeStore);
