1

Не пойму, что я упустил. Приложение крашится после добавления редакса в 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;

1 ответ 1

1

Нашел ошибку! Надо было в mainReducer убрать экспорт слайса:

const mainReducer = createSlice({

А в _app.tsx убрать фигурные скобки, чтобы импорт совершался по дефолту:

import mainReducer from "../reducers/mainReducer";

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.