kirill-konshin / next-redux-wrapper

Redux wrapper for Next.js
MIT License
2.67k stars 265 forks source link

Problem with "makeStore is not a function" #151

Closed maitzeth closed 5 years ago

maitzeth commented 5 years ago

Hello there.. Im having a problem, When I try to Wrapp withRedux my _app component just throw me this error:

makeStore is not a function
TypeError: makeStore is not a function
    at createStore (~/website/node_modules/next-redux-wrapper/lib/index.js:95:20)

Right know I'm using next-redux-wrapper: 3.0.0 and next: 9.0.4

What could be wrong? im new using NEXTJS!

// store/index.js
import { createStore, applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import reducers from "./reducers";
const middlewares = [ReduxThunk];

// Persiste Config
const persistConfig = {
  key: "nextjs",
  storage,
  whitelist: ["auth"]
};

const persistedReducer = persistReducer(persistConfig, reducers);
const enhancer = composeWithDevTools(applyMiddleware(...middlewares));

const store = createStore(persistedReducer, enhancer);
store.__persistor = persistStore(store);
export default store;
// _app.js
import App, { Container } from "next/app";
import { Provider } from "react-redux";
import Layout from "../components/Layout";
import "../styles/styles.scss";
import "react-toastify/scss/main.scss";
import { PersistGate } from "redux-persist/integration/react";
import store from "../redux/index";
import withRedux from "next-redux-wrapper";

export default withRedux(store, { debug: true })(
  class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
      return {
        pageProps: {
          // Call page-level getInitialProps
          ...(Component.getInitialProps
            ? await Component.getInitialProps(ctx)
            : {})
        }
      };
    }

    render() {
      const { Component, pageProps, store } = this.props;

      console.log(store);

      return (
        <Container>
          <Provider store={store}>
            <PersistGate persistor={store.__persistor}>
              <Layout>
                <Component {...pageProps} />
              </Layout>
            </PersistGate>
          </Provider>
        </Container>
      );
    }
  }
);
kirill-konshin commented 5 years ago

You need to supply create store function instead of store here:

export default withRedux(store, { debug: true })(

https://github.com/kirill-konshin/next-redux-wrapper#installation