Не пойму, что я упустил. Приложение крашится после добавления редакса в next.js. Где-то настройка не верная, но я не вижу проблемы, уже сто раз все перепроверил.
IDE подчеркивает main в configureStore:
TS2322: Type 'Slice<IState, { setIsModalOpen(state: WritableDraft, action: { payload: any; type: string; }): void; }, "mainReducer">' is not assignable to type 'Reducer<unknown, AnyAction>'. Type 'Slice<IState, { setIsModalOpen(state: WritableDraft, action: { payload: any; type: string; }): void; }, "mainReducer">' provides no match for the signature '(state: unknown, action: AnyAction): unknown'.
Сайт крашится с такой ошибкой:
TypeError: Cannot destructure property 'isModalOpen' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(...)' as it is undefined.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Краш происходит в этой строке:
const Modal = () => {
const { isModalOpen } = useSelector((state: RootState) => state.main);
Ошибка находится где-то в этих файлах:
Содержимое _app.tsx:
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import PageLayout from '../components/PageLayout/PageLayout';
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import { mainReducer } from "../reducers/mainReducer";
const store = configureStore({
reducer: {
main: mainReducer,
},
devTools: process.env.NODE_ENV !== 'production',
});
export type RootState = ReturnType<typeof store.getState>;
function MyApp({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<PageLayout>
<Component {...pageProps} />
</PageLayout>
</Provider>
);
}
export default MyApp;
Содержимое mainReducer:
import { createSlice } from '@reduxjs/toolkit';
interface IState {
isModalOpen: boolean;
}
const initialState: IState = {
isModalOpen: false,
};
export const mainReducer = createSlice({
name: 'mainReducer',
initialState,
reducers: {
setIsModalOpen(state, action) {
state.isModalOpen = action.payload;
},
},
})
export const { setIsModalOpen } = mainReducer.actions;
export default mainReducer.reducer;
Компонент, где возникает ошибка:
import React from 'react';
import { WrappedModal } from './style';
import { useDispatch, useSelector } from "react-redux";
import { setIsModalOpen } from "../../reducers/mainReducer";
const Modal = () => {
const { isModalOpen } = useSelector((state: RootState) => state.main);
const dispatch = useDispatch();
return (
<WrappedModal onClick={() => dispatch(setIsModalOpen(false))} isModalOpen={isModalOpen}>
<div className='content' onClick={e => e.stopPropagation()}>
текст
</div>
</WrappedModal>
);
};
export default Modal;