Next.Js Redux Wrapper w/Typescript - 实现错误，存储不存在为类型

Question

I am implementing state management for React. I am using Next.js and Typescript.

I used the next redux wrapper and have the following on /pages/_app.js as instructed by the guide.

import React from "react";
import {createStore} from "redux";
import {Provider} from "react-redux";
import App, {Container} from "next/app";
import withRedux from "next-redux-wrapper";
import configureStore from '../state/store';

class MyApp extends App {

    static async getInitialProps ({Component, ctx}) {
        return {
          pageProps: (Component.getInitialProps ? await Component.getInitialProps(ctx) : {})
        }
      }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }

}

export default withRedux(configureStore)(MyApp);

I get a typescript error on the store variable I'm trying to declare in the render() function, which throws me an error as follows:

const store: any
Property 'store' does not exist on type 'Readonly<AppInitialProps & { Component: NextComponentType<NextPageContext, any, {}>; router: Router; }> & Readonly<{ children?: ReactNode; }>'.ts(2339)

I am unsure as to what the issue is. I am not able to access any type/interface to allow store to be a variable. And this is interesting because this is the solution for many developers when using Typescript/Redux/Next.js.

Any help/pointers would be appreciated, thank you.

Answer 1

Container is deprecated now; use App instead and pass it props with Store . Setting something to 'any' because it's giving you errors is not a good solution and kind of defeats the whole purpose of using TypeScript in the first place.

import App, { AppContext } from 'next/app'
import { Provider } from 'react-redux'
import withRedux from 'next-redux-wrapper'
import { Store } from 'redux'
import Page from '../components/Page'
import { initializeStore } from '../store'

interface Props {
  store: Store;
}

class MyApp extends App<Props> {
  static async getInitialProps({ Component, ctx }: AppContext) {
    return {
      pageProps: (Component.getInitialProps 
        ? await Component.getInitialProps(ctx) 
        : {}),
    }
  }

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

    return (
      <Provider store={store}>
        <Page>
          <Component {...pageProps} />
        </Page>
      </Provider>
    )
  }
}

export default withRedux(initializeStore)(MyApp)

Answer 2

Fixed the issue.

I added a simple

interface Props {
    store: any
}

To circumvent the Typescript error.