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;
Advertisement
Answer
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!