refactor store

refactor about page

Author: devmrh

frontend/pages/about.tsx

@@ -1,8 +1,7 @@
 import { connect, useSelector } from "react-redux";
-
 import { NextPage } from "next";
 import { bindActionCreators } from "redux";
-import { getUsers } from "../store/count/action";
+import { getUsers } from "../store/count/actions/countActions";
 import { useEffect } from "react";
 import { wrapper } from "../store/store";
 import { client } from "../lib/apollo";
@@ -16,12 +15,11 @@ const About: NextPage = ({pageProps, getStaticProp}) => {
   // getUsers()
  // const aa = useSelector((state) => state);
    //console.log("IM AA", aa);
-   const {app,users, page} = useSelector(state => state);
+   const data = useSelector(state => state);
 
-  // console.log("im props", props);
   return (
     <ul>
-      {users?.map((post) => (
+      {data.count.users?.map((post) => (
         <>
           <li>{post.id}</li>
           <li>{post.email}</li>
@@ -34,35 +32,25 @@ const About: NextPage = ({pageProps, getStaticProp}) => {
 export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
 
 
-  const User_Query = gql`
-  query {
-    getUsers {
-      id
-      email
-    }
-  }
-`;
-
-await client().query({ query: User_Query }).then((res) => {
-
-  store.dispatch({type: 'GET_USERS', payload: res?.data?.getUsers});
-});
+//   const User_Query = gql`
+//   query {
+//     getUsers {
+//       id
+//       email
+//     }
+//   }
+// `;
 
+//   await client().query({ query: User_Query }).then((res) => {
+//     store.dispatch({type: 'GET_USERS', payload: res?.data?.getUsers});
+//   });
 
+  await store.dispatch(getUsers());
   return {props: {getStaticProp: 'bar'}};
 
-  // store.dispatch(serverRenderClock(true))
-  //store.dispatch(addCount())
-//   await store.dispatch(getUsers());
 
-//   const data = await store.getState();
 
-//   return {
-//     props: {
-//       users: data.count.users,
-//     },
-//     revalidate: 1,
-//   };
+
 });
 
 // const mapDispatchToProps = (dispatch) => {

frontend/store/count/action.ts renamed to frontend/store/count/actions/countActions.ts

@@ -1,14 +1,9 @@
 import { useLazyQuery, useQuery } from "@apollo/react-hooks";
-
 import { gql } from "apollo-boost";
 import { useApolloClient } from "@apollo/react-hooks";
+import { countActionTypes } from './types';
+import { client } from "../../../lib/apollo";
 
-export const countActionTypes = {
-  ADD: "ADD",
-  ADD_POST: "ADD_POSTS",
-  GET_USERS: "GET_USERS",
-  SET_USERS: "SET_USERS"
-};
 
 export const addCount = () => (dispatch) => {
   return dispatch({ type: countActionTypes.ADD });
@@ -18,8 +13,7 @@ export const addPosts = () => (dispatch) => {
   return dispatch({ type: countActionTypes.ADD_POST });
 };
 
-export const getUsers = () => async (dispatch, getState, client) => {
-  //console.log("chcekted");
+export const getUsers = () => async (dispatch, getState) => {
   const User_Query = gql`
     query {
       getUsers {
@@ -29,7 +23,7 @@ export const getUsers = () => async (dispatch, getState, client) => {
     }
   `;
 
-  await client.query({ query: User_Query }).then((res) => {
+  await client().query({ query: User_Query }).then((res) => {
     return dispatch({
       type: countActionTypes.GET_USERS,
       payload: res?.data?.getUsers,

frontend/store/count/actions/types.ts

@@ -0,0 +1,6 @@
+export const countActionTypes = {
+  ADD: "ADD",
+  ADD_POST: "ADD_POSTS",
+  GET_USERS: "GET_USERS",
+  SET_USERS: "SET_USERS"
+};

frontend/store/count/reducer.ts renamed to frontend/store/count/reducers/countReducer.ts

@@ -1,14 +1,14 @@
 import {AnyAction} from 'redux';
 import {HYDRATE} from 'next-redux-wrapper';
-import {client} from '../../lib/apollo';
-import { countActionTypes } from './action';
+import { countActionTypes } from '../actions/types';
+
 export interface State {
     app: string;
     page: string;
     users: any
 }
 
-const reducer = (state: State = {app: 'init', page: 'init', users: {}}, action: AnyAction) => {
+export const countReducer = (state: State = {app: 'init', page: 'init', users: {}}, action: AnyAction) =>  {
     switch (action.type) {
         case HYDRATE:
             if (action.payload.app === 'init') delete action.payload.app;
@@ -18,14 +18,14 @@ const reducer = (state: State = {app: 'init', page: 'init', users: {}}, action:
             return {...state, app: action.payload};
         case 'PAGE':
             return {...state, page: action.payload};
-        case 'GET_USERS':
+        case countActionTypes.GET_USERS:
             return {...state, users: action.payload};
         default:
             return state;
     }
 };
 
-export default reducer;
+///export default count;
 
 
 

frontend/store/count/reducers/index.ts

@@ -0,0 +1,6 @@
+import {combineReducers} from 'redux';
+import {countReducer} from './countReducer'
+
+export default combineReducers({
+    count: countReducer
+});

frontend/store/store.ts

@@ -1,8 +1,9 @@
-import {createStore, applyMiddleware} from 'redux';
+import {createStore, applyMiddleware, combineReducers} from 'redux';
 //import logger from 'redux-logger';
-import {MakeStore, createWrapper, Context} from 'next-redux-wrapper';
-import reducer, {State} from './count/reducer';
-
+import {MakeStore, createWrapper, Context, HYDRATE} from 'next-redux-wrapper';
+import rootReducer from '../store/count/reducers';
+import {State} from '../store/count/reducers/countReducer';
+import thunkMiddleware from 'redux-thunk'
 
 const bindMiddleware = (middleware) => {
     if (process.env.NODE_ENV !== 'production') {
@@ -12,56 +13,32 @@ const bindMiddleware = (middleware) => {
     return applyMiddleware(...middleware)
   }
 
+
+const reducer = (state, action) => {
+  if (action.type === HYDRATE) {
+    const nextState = {
+      ...state, // use previous state
+      ...action.payload, // apply delta from hydration
+    }
+    //if (state.count) nextState.count = state.count // preserve count value on client side navigation
+    return nextState
+  } else {
+    return rootReducer(state, action)
+  }
+}
+
 export const makeStore: MakeStore<State> = (context: Context) => {
-    const store = createStore(reducer, bindMiddleware([]));
+    const store = createStore(reducer, bindMiddleware([thunkMiddleware]));
 
     // if (module.hot) {
     //     module.hot.accept('./reducer', () => {
     //         console.log('Replacing reducer');
     //         store.replaceReducer(require('./reducer').default);
     //     });
     // }
-
     return store;
 };
 
 export const wrapper = createWrapper<State>(makeStore, {debug: true});
 
 
-// import { HYDRATE, createWrapper } from 'next-redux-wrapper'
-// import { applyMiddleware, combineReducers, createStore } from 'redux'
-
-// import { client } from '../lib/apollo';
-// import count from './count/reducer'
-// import thunkMiddleware from 'redux-thunk'
-
-// const bindMiddleware = (middleware) => {
-//   if (process.env.NODE_ENV !== 'production') {
-//     const { composeWithDevTools } = require('redux-devtools-extension')
-//     return composeWithDevTools(applyMiddleware(...middleware))
-//   }
-//   return applyMiddleware(...middleware)
-// }
-
-// const combinedReducer = combineReducers({
-//   count,
-// })
-
-// const reducer = (state, action) => {
-//   if (action.type === HYDRATE) {
-//     const nextState = {
-//       ...state, // use previous state
-//       ...action.payload, // apply delta from hydration
-//     }
-//     if (state.count) nextState.count = state.count // preserve count value on client side navigation
-//     return nextState
-//   } else {
-//     return combinedReducer(state, action)
-//   }
-// }
-
-// const initStore = () => {
-//   return createStore(reducer, bindMiddleware([thunkMiddleware.withExtraArgument(client)]))
-// }
-
-// export const wrapper = createWrapper(initStore)