如何在 __app.js 中配置 appWithTranslation(nexti18next + withRedux (next-redux-wrapper)

Question

我正在使用 react-redux、redux、nexti18next、next-redux-wrapper 将 reactjs 项目转移到 nextjs，这里是 _app.js 和 redux.js 它运行是的，但是如果我添加 withRedux 是错误的。请告诉我如何解决这个问题或给我一些解决方案！

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;

Answer 1

这是 NextJS/Typescript/Redux/Styled-Components/next-i18next 应用示例的示例。

// _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;

并且我在 tsconfig

中有路径别名

   "paths": {
      "@Definitions/*": ["definitions/*"],
      "@Interfaces": ["interfaces"],
      "@Redux": ["redux-store"],
      "@Server/*": ["server/*"]
    }

希望这对某人有所帮助！

如何在 __app.js 中配置 appWithTranslation(nexti18next + withRedux (next-redux-wrapper)

How to config appWithTranslation(nexti18next + withRedux (next-redux-wrapper) in __app.js

javascript

next.js

next-i18next

next-redux-wrapper