Question

我目前正在使用 NextJS 和 typescript 和 redux-saga 开发一个简单的项目我收到了一个错误，这让我非常害怕。我尝试对 /store/index、/reducer/index 实现任何类型，但我仍然遇到另一个错误。这是我使用 wrapper.getStaticProps 时的错误

Here is the pic of the type error

这是我的代码

/_app.tx

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import wrapper from '../store/configure';

function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}
export default wrapper.withRedux(MyApp);

/index.tsx => 这是我使用 getStaticProps 得到类型错误的文件。

import Layout from '../components/Layout';
import LandingPage from './LandingPage';
import wrapper from '../store/configure';
export default function Home() {
    return (
        <Layout title="LandingPage">
            <LandingPage />
        </Layout>
    );
}

export const getStaticProps = wrapper.getStaticProps(async ({store}) => {
// here I get type problem with (async ({store}) => ....
  await store.sagaTask?.toPromise();
});

/reducer/index.ts

import { RootStateInterface } from './../interface/iRootState';
import { AnyAction, combineReducers, Reducer } from 'redux';
import user from './user';

// export interface State {
//  user: IUserReducerState;
// }

const rootReducer: Reducer<RootStateInterface, AnyAction> =
    combineReducers<RootStateInterface>({
        user,
    });
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

/store/configure.ts

import { createWrapper, MakeStore } from 'next-redux-wrapper';
import { applyMiddleware, compose, createStore, Store, AnyAction } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware, { Task } from 'redux-saga';
import rootReducer from '../reducer';
import rootSaga from '../sagas';

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const middlewares = [sagaMiddleware];
    const enhancer =
        process.env.NODE_ENV === 'production'
            ? compose(applyMiddleware(...middlewares)) 
            : composeWithDevTools(applyMiddleware(...middlewares)); 
    const store = createStore(rootReducer, enhancer);
    store.sagaTask = sagaMiddleware.run(rootSaga);
    return store;
};

const wrapper = createWrapper(configureStore, {
    debug: process.env.NODE_ENV === 'development', 
});

export default wrapper;

fullscreen of the /page/index.tsx and err log

我尝试了我能做的一切，现在我被困在这里。感谢您与我分享您的丰富知识。

以防万一您需要所有文件

https://github.com/Gimoring/Petpairs/tree/Errors

或 frontDev 分支（如果需要）。

如何在 typescript 和 redux-saga 中使用 nextJS？

0 个答案: