initial commit

store/progress/action.js

@@ -0,0 +1,18 @@
+export const progressActionTypes = {
+  GETPROGRESS: "GETPROGRESS",
+  SETPROGRESS: "SETPROGRESS",
+  UPDATEPROGRESS: "UPDATEPROGRESS",
+};
+
+export const getProgressObj = () => (dispatch) => {
+  return dispatch({
+    type: progressActionTypes.GETPROGRESS,
+  });
+};
+
+export const setProgress = (progress) => (dispatch) => {
+  return dispatch({
+    type: progressActionTypes.SETPROGRESS,
+    progressObj: progress,
+  });
+};

store/progress/reducer.js

@@ -0,0 +1,16 @@
+import { progressActionTypes } from "./action";
+
+const progressInitialState = {
+  progress: {},
+};
+
+export default function reducer(state = progressInitialState, action) {
+  switch (action.type) {
+    case progressActionTypes.SETPROGRESS:
+      return {
+        progressObj: action.progressObj,
+      };
+    default:
+      return state;
+  }
+}

store/store.js

@@ -0,0 +1,95 @@
+import { createStore, applyMiddleware, combineReducers } from "redux";
+import { createWrapper, HYDRATE } from "next-redux-wrapper";
+import thunkMiddleware from "redux-thunk";
+import progress from "./progress/reducer";
+import { reducer as formReducer } from "redux-form";
+import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
+
+//COMBINING ALL REDUCERS
+const combinedReducer = combineReducers({
+  progress,
+});
+
+const reducer = (state = { progress: "{}" }, action) => {
+  switch (action.type) {
+    case HYDRATE:
+      //if (action.payload.progress === '{}') delete action.payload.progress;
+      return { ...state, ...action.payload };
+    case "SERVER_ACTION":
+      return {
+        ...state,
+        server: {
+          ...state.server,
+          progress: action.payload,
+        },
+      };
+    case "CLIENT_ACTION":
+      return {
+        ...state,
+        client: {
+          ...state.client,
+          progress: action.payload,
+        },
+      };
+    case "GET_ITEMS":
+      return {
+        ...state,
+        items: action.payload,
+        loading: false,
+      };
+    case "SET_ITEMS":
+      return {
+        ...state,
+        items: action.payload,
+        loading: false,
+      };
+    default:
+      return combinedReducer(state, action);
+  }
+};
+
+// 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
+    return createStore(reducer, bindMiddleware([thunkMiddleware]));
+  } else {
+    //If it's on client side, create a store which will persist
+    const { persistStore, persistReducer } = require("redux-persist");
+    const storage = require("redux-persist/lib/storage").default;
+
+    const persistConfig = {
+      key: "nextjs",
+      whitelist: [
+        "progress"
+      ],
+      storage,
+      stateReconciler: autoMergeLevel2, // if needed, use a safer storage
+    };
+
+    const persistedReducer = persistReducer(persistConfig, reducer); // Create a new reducer with our existing reducer
+
+    const store = createStore(
+      persistedReducer,
+      bindMiddleware([thunkMiddleware])
+    ); // Creating the store again
+
+    store.__persistor = persistStore(store); // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature
+
+    return store;
+  }
+};
+export const setClientState = (clientState) => ({
+  type: SET_CLIENT_STATE,
+  payload: clientState,
+});
+// Export the wrapper & wrap the pages/_app.js with this wrapper only
+export const wrapper = createWrapper(makeStore);