Столкнулся с проблемой, что при использовании nextjs 13.1.5 в связке redux 4.2.0 появляется ошибка "TypeError: (0 , _react.createContext) is not a function"
Подключение provider в _app.tsx (Решил использовать nextjs ее новую архитектуру с директорий app)
import type { AppProps } from 'next/app'
import {Provider} from "react-redux";
import {store, wrapper} from "@/redux/store";
function App({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
)
}
export default wrapper.withRedux(App)
Сам файлик store.ts выглядит вот так
import {Action} from "redux";
import { createWrapper } from "next-redux-wrapper";
import {ThunkAction} from "redux-thunk";
import {configureStore} from "@reduxjs/toolkit";
import {authReducer} from "@/redux/slices/auth";
export function makeStore() {
return configureStore({
reducer: {
auth: authReducer
}
})
}
export const store = makeStore()
export type RootStore = ReturnType<typeof makeStore>
export type RootState = ReturnType<RootStore['getState']>
export type AppDispatch = typeof store.dispatch
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootStore, unknown, Action<string>>
export const wrapper = createWrapper<RootStore>(makeStore)
Слайсер для auth.ts
import {createSlice, PayloadAction} from "@reduxjs/toolkit";
import {RootState} from "@/redux/store";
interface user {
id: number,
email: string,
name: string
}
export interface Auth {
data: user|null
}
const initialState: Auth = {
data: null
}
export const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
setAuthData: (state, action:PayloadAction<user>) => {
state.data = action.payload
}
}
})
export const {setAuthData} = authSlice.actions
export const selectAuthData = (state: RootState) => state.auth.data
export const authReducer = authSlice.reducer
Стоит мне попытаться связать клиентскую часть и серверную сразу вылезает ошибка "TypeError: (0 , _react.createContext) is not a function"
Метод для связывания написан внизу страницы
Home.getInitialProps = wrapper.getInitialPageProps(store => ({pathname, req, res}) => {
console.log('2. Page.getInitialProps uses the store to dispatch things');
return {props:{}}
})