Привет, я настраиваю хранилище 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))