I'm tranfer reactjs project to nextjs with react-redux, redux, nexti18next, next-redux-wrapper here is _app.js and redux.js it run right but if i add withRedux it is error. Please tell me how to resolve this problem or advide me some solution!
import React from "react";
import App, { Container } from "next/app";
import { appWithTranslation } from "../i18n";
import ScrollToTop from "../components/ScrollToTop";
import { createBrowserHistory } from "history";
import { Provider } from "react-redux";
import storeConfig from "../redux";
import compose from "recompose/compose";
const history = createBrowserHistory();
const store = storeConfig();
import withRedux from "next-redux-wrapper";
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
console.log(store)
return (
<Container>
<ScrollToTop>
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</ScrollToTop>
</Container>
);
}
}
export default compose(appWithTranslation)(MyApp);
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import getQuote, { initGetQuoteState } from './Modules/GetQuote';
import getSlider, { initGetSliderState } from './Modules/GetSlider';
import getUser, {initGetUserState } from './Modules/User';
import {composeWithDevTools } from 'redux-devtools-extension'
const initState = {
getQuote: initGetQuoteState,
getSlider: initGetSliderState,
getUser: initGetUserState
};
const rooteReducer = combineReducers({
getQuote,
getSlider,
getUser
});
const store = () => createStore(rooteReducer, initState, composeWithDevTools(applyMiddleware(thunk)))
export default store;
Here is example of NextJS/Typescript/Redux/Styled-Components/next-i18next app sample.
// _app.tsx
import * as React from "react";
import App, { AppInitialProps, AppContext } from "next/app";
import withRedux from "next-redux-wrapper";
import { Provider } from "react-redux";
import { ThemeProvider } from "styled-components";
import { theme } from "@Definitions/Styled";
import { appWithTranslation } from "@Server/i18n";
import { AppWithStore } from "@Interfaces";
import { makeStore } from "@Redux";
import "@Static/css/main.scss";
class ProgressiveWebApp extends App<AppWithStore> {
static async getInitialProps({
Component,
ctx,
}: AppContext): Promise<AppInitialProps> {
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {};
return { pageProps };
}
render() {
const { Component, pageProps, store } = this.props;
return (
<Provider store={store}>
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
</Provider>
);
}
}
export default withRedux(makeStore)(appWithTranslation(ProgressiveWebApp));
//i18.ts
import NextI18Next from "next-i18next";
const NextI18NextInstance = new NextI18Next({
defaultLanguage: "en",
otherLanguages: ["es"],
});
export const {
appWithTranslation,
withTranslation,
useTranslation,
i18n,
} = NextI18NextInstance;
export default NextI18NextInstance;
and I have path alias in tsconfig
"paths": {
"@Definitions/*": ["definitions/*"],
"@Interfaces": ["interfaces"],
"@Redux": ["redux-store"],
"@Server/*": ["server/*"]
}
hope this helps somebody!