Next.js、Redux、Redux-saga、@reduxjs/toolkit make store - 没有重载与此调用匹配

Question

你好，我正在配置 redux 存储，我需要像这样思考

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import createSagaMiddleware from 'redux-saga'
import logger from 'redux-logger'
import { reduxBatch }  from '@manaflair/redux-batch';

import rootSaga from '../sagas/root-saga'

import rootReducer from './rootReducer'

const makeStore = (initialState, options) => {
    const sagaMiddleware = createSagaMiddleware()

    const middleware = [...getDefaultMiddleware(), logger, sagaMiddleware]

    const preloadedState = {}

    const store = configureStore({
        reducer: rootReducer,
        middleware,
        devTools: process.env.NODE_ENV !== 'production',
        preloadedState,
        enhancers: [reduxBatch]
    })

    sagaMiddleware.run(rootSaga)

    return store
}

// export type AppDispatch = typeof makeStore.dispatch

export type AppStore = typeof makeStore

export default makeStore

我想使用 redux-saga、@reduxjs/toolkit、Next.js、redux

_app.tsx

import React from 'react'
import { Container, AppProps } from 'next/app'
import { Provider } from 'react-redux'
import withRedux from 'next-redux-wrapper'
import withReduxSaga from 'next-redux-saga'
import { ConnectedRouter } from 'connected-next-router'

import GlobalStyles from '../src/globalStyles'
// import { ErrorBoundary } from '../src/components/ErrorBoundary'
import makeStore, { AppStore } from '../src/store'

interface Props extends AppProps {
    store: AppStore
}

const MyApp = ({ Component, pageProps, store }: Props) => {
    return (
        <Container>
            <Provider store={store}>
                <ConnectedRouter>
                    <GlobalStyles/>
                    {/*<ErrorBoundary>*/}
                    {/*<Layout>*/}
                    <Component {...pageProps} />
                    {/*</Layout>*/}
                    {/*</ErrorBoundary>*/}
                </ConnectedRouter>
            </Provider>
        </Container>
    )
}

export default withRedux(makeStore)(withReduxSaga(MyApp))

但我在商店遇到错误

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ProviderProps<AnyAction>>): Provider<AnyAction>', gave the following error.
    Type '(initialState: any, options: any) => EnhancedStore<{ readonly [$CombinedState]?: undefined; }, AnyAction, (Middleware<{}, any, Dispatch<AnyAction>> | Middleware)[]>' is missing the following properties from type 'Store<any, AnyAction>': dispatch, getState, subscribe, replaceReducer, [Symbol.observable]
  Overload 2 of 2, '(props: ProviderProps<AnyAction>, context?: any): Provider<AnyAction>', gave the following error.
    Type '(initialState: any, options: any) => EnhancedStore<{ readonly [$CombinedState]?: undefined; }, AnyAction, (Middleware<{}, any, Dispatch<AnyAction>> | Middleware)[]>' is not assignable to type 'Store<any, AnyAction>'.

我尝试了这里的示例，但没有使用 Next.js 和 Redux，所以我需要结合这两种方式。

我不知道它应该是什么样子。有人能帮助我吗？:)

更新！

我通过配置解决了问题store.ts

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import createSagaMiddleware from 'redux-saga'
import logger from 'redux-logger'
import { reduxBatch }  from '@manaflair/redux-batch';

import rootSaga from '../sagas/root-saga'

import rootReducer from './rootReducer'

const sagaMiddleware = createSagaMiddleware()

const middleware = [...getDefaultMiddleware(), logger, sagaMiddleware]

const preloadedState = {}

const store = configureStore({
    reducer: rootReducer,
    middleware,
    devTools: process.env.NODE_ENV !== 'production',
    preloadedState,
    enhancers: [reduxBatch]
})

// @ts-ignore TODO: resolve 
store.sagaTask = sagaMiddleware.run(rootSaga)

export type AppDispatch = typeof store.dispatch

export type AppStore = typeof store

export default store

并改变了_app.tsx

const makeStore = () => store

export default withRedux(makeStore)(withReduxSaga(MyApp))