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

Question

我正在为 React 实现状态管理。我正在使用 Next.js 和 Typescript。

我使用了下一个 redux 包装器，并按照指南的指示在 /pages/_app.js 上有以下内容。

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);

我试图在 render() 函数中声明的 store 变量上出现打字稿错误，这会引发如下错误：

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

我不确定问题是什么。我无法访问任何类型/接口以允许 store 成为变量。这很有趣，因为这是许多开发人员在使用 Typescript/Redux/Next.js 时的解决方案。

任何帮助/指针将不胜感激，谢谢。

Answer 1

Container现在已弃用；App改用并用.props 传递它Store。将某些东西设置为“任何”，因为它会给您带来错误，这不是一个好的解决方案，并且首先违背了使用 TypeScript 的全部目的。

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)