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 you have read our privacy policy.

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