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!
JavaScript
x
59
59
1
import React from "react";
2
import App, { Container } from "next/app";
3
import { appWithTranslation } from "../i18n";
4
import ScrollToTop from "../components/ScrollToTop";
5
import { createBrowserHistory } from "history";
6
import { Provider } from "react-redux";
7
import storeConfig from "../redux";
8
import compose from "recompose/compose";
9
const history = createBrowserHistory();
10
const store = storeConfig();
11
import withRedux from "next-redux-wrapper";
12
class MyApp extends App {
13
static async getInitialProps({ Component, ctx }) {
14
let pageProps = {};
15
if (Component.getInitialProps) {
16
pageProps = await Component.getInitialProps(ctx);
17
}
18
return { pageProps };
19
}
20
render() {
21
const { Component, pageProps } = this.props;
22
console.log(store)
23
return (
24
<Container>
25
<ScrollToTop>
26
<Provider store={store}>
27
<Component {pageProps} />
28
</Provider>
29
</ScrollToTop>
30
</Container>
31
);
32
}
33
}
34
export default compose(appWithTranslation)(MyApp);
35
36
37
38
import { createStore, combineReducers, applyMiddleware } from 'redux';
39
import thunk from 'redux-thunk';
40
import getQuote, { initGetQuoteState } from './Modules/GetQuote';
41
import getSlider, { initGetSliderState } from './Modules/GetSlider';
42
import getUser, {initGetUserState } from './Modules/User';
43
import {composeWithDevTools } from 'redux-devtools-extension'
44
const initState = {
45
getQuote: initGetQuoteState,
46
getSlider: initGetSliderState,
47
getUser: initGetUserState
48
};
49
50
const rooteReducer = combineReducers({
51
getQuote,
52
getSlider,
53
getUser
54
});
55
56
const store = () => createStore(rooteReducer, initState, composeWithDevTools(applyMiddleware(thunk)))
57
export default store;
58
59
Advertisement
Answer
Here is example of NextJS/Typescript/Redux/Styled-Components/next-i18next app sample.
JavaScript
1
39
39
1
// _app.tsx
2
import * as React from "react";
3
import App, { AppInitialProps, AppContext } from "next/app";
4
import withRedux from "next-redux-wrapper";
5
import { Provider } from "react-redux";
6
import { ThemeProvider } from "styled-components";
7
import { theme } from "@Definitions/Styled";
8
import { appWithTranslation } from "@Server/i18n";
9
import { AppWithStore } from "@Interfaces";
10
import { makeStore } from "@Redux";
11
import "@Static/css/main.scss";
12
13
class ProgressiveWebApp extends App<AppWithStore> {
14
static async getInitialProps({
15
Component,
16
ctx,
17
}: AppContext): Promise<AppInitialProps> {
18
const pageProps = Component.getInitialProps
19
? await Component.getInitialProps(ctx)
20
: {};
21
22
return { pageProps };
23
}
24
25
render() {
26
const { Component, pageProps, store } = this.props;
27
28
return (
29
<Provider store={store}>
30
<ThemeProvider theme={theme}>
31
<Component {pageProps} />
32
</ThemeProvider>
33
</Provider>
34
);
35
}
36
}
37
38
export default withRedux(makeStore)(appWithTranslation(ProgressiveWebApp));
39
JavaScript
1
17
17
1
//i18.ts
2
import NextI18Next from "next-i18next";
3
4
const NextI18NextInstance = new NextI18Next({
5
defaultLanguage: "en",
6
otherLanguages: ["es"],
7
});
8
9
export const {
10
appWithTranslation,
11
withTranslation,
12
useTranslation,
13
i18n,
14
} = NextI18NextInstance;
15
16
export default NextI18NextInstance;
17
and I have path alias in tsconfig
JavaScript
1
7
1
"paths": {
2
"@Definitions/*": ["definitions/*"],
3
"@Interfaces": ["interfaces"],
4
"@Redux": ["redux-store"],
5
"@Server/*": ["server/*"]
6
}
7
hope this helps somebody!