How to Call API In NextJS Using Redux With SSR?

Question

Need One Help i am trying to call api in nextjs using redux(Here,SSR is not possible) and getServerSideProps(Here, SSR is Possible but without redux) in both case API Called Successfully. If i used it individually bot are working well but now i want to merge it both and i have read about next-redux-wrapper but when i am integrate it.

API Called Using GetServerSideProps() index.js `

import Product from "./product-cart";
import React from "react";
import styles from "../styles/Product.module.css";
import axios from "axios";

const Home = ({ products, loading }) => {
  return (
    <>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <>
          <div className={styles.banner}>
            <p>Welcome to ecommerce!</p>
            <h1>FIND AMAZING PRODUCT BELOW</h1>
            <a href="#container">
              <button>Scroll</button>
            </a>
          </div>
          <h2 className={styles.homeHeading}>Featured Product</h2>
          <div className={styles.container} id="container">
            {products &&
              products.map((products) => (
                <Product key={products._id} products={products} />
              ))}
          </div>
        </>
      )}
    </>
  );
};
export default Home;
export async function getServerSideProps(context) {
  let link = `http://localhost:5000/api/v1/product`;
  const { data } = await axios.get(link);
  return { props: { products: data.product } };
}

`

API Called Using Redux

_app.js

`

import { Provider } from "react-redux";
import store, { wrapper } from "../redux/store";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </>
  );
}

// export default wrapper.withRedux(MyApp);
export default MyApp;

`

index.js(GetProduct() Created In Action File)

`

import Product from "./product-cart";
import React from "react";
import styles from "../styles/Product.module.css";
import { clearErrors, getProduct } from "../redux/Actions/ProductAction";
import { useSelector, useDispatch, connect } from "react-redux";
import axios from "axios";
import { wrapper } from "../redux/store";

const Home = ({ products, loading }) => {
  const { loading, error, products } = useSelector(
    (state) => state.products || {}
  );

  const dispatch = useDispatch();
  React.useEffect(() => {
    if (error) {
      dispatch(clearErrors());
    }
    dispatch(getProduct());
  }, [dispatch]);
  return (
    <>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <>
          <div className={styles.banner}>
            <p>Welcome to ecommerce!</p>
            <h1>FIND AMAZING PRODUCT BELOW</h1>
            <a href="#container">
              <button>Scroll</button>
            </a>
          </div>
          <div suppressHydrationWarning>
            {process.browser ? "browser" : "server"}
          </div>

          <h2 className={styles.homeHeading}>Featured Product</h2>
          <div className={styles.container} id="container">
            {products &&
              products.map((products) => (
                <Product key={products._id} products={products} />
              ))}
          </div>
        </>
      )}
    </>
  );
};

export default Home;

`

If you need more information let me know

TypeError: makeStore is not a function

enter image description here

Try to Use Next-redux-wrapper but not able to find solution regarding that

_app.js

import { Provider } from "react-redux";
import store, { wrapper } from "../redux/store";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </>
  );
}

export default wrapper.withRedux(MyApp);

store.js

import {
  createStore,
  combineReducers,
  applyMiddleware,
  legacy_createStore,
} from "redux";
import thunk from "redux-thunk";
// import { createStore } from "redux";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import { composeWithDevTools } from "redux-devtools-extension";
import {
  adminProductEDReducer,
  AdminProductReducer,
  newProductReducer,
  newReviewReducer,
  productDetailReducer,
  productReducer,
} from "./Reducers/ProductReducer";
import {
  userReducer,
  profileReducer,
  forgotPasswordReducer,
  allUserReducer,
  userDetailsReducer,
} from "./Reducers/UserReducers";

const reducer = combineReducers({
  products: productReducer,
  productDetails: productDetailReducer,
  adminProduct: AdminProductReducer,
  newProduct: newProductReducer,
  user: userReducer,
  profile: profileReducer,
  forgotPassword: forgotPasswordReducer,
  newReview: newReviewReducer,
  EditDelProduct: adminProductEDReducer,
  allUser: allUserReducer,
  userDetail: userDetailsReducer,
});

// if the value is in cart otherwise it will be blank and we can store cartitems in localstorage
let initialState = {};
const middleware = [thunk];

const store = legacy_createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

// export an assembled wrapper
export const wrapper = createWrapper(store, { debug: true });

export default store;