Next. js, Redux, Redux-saga, @ reduxjs / toolkit make store - перегрузка не соответствует этому вызову - PullRequest
2 голосов
/ 31 марта 2020

Привет, я настраиваю хранилище 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 withRedux, поэтому мне нужно объединить эти два способа.

Я не знаю, как это должно выглядеть. Может кто-то мне помочь, пожалуйста? :)

ОБНОВЛЕНИЕ!

Я решил свою проблему с конфигурацией 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))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...