我正在尝试将 Redux RTK 集成到我的 Next JS 13.4 应用程序中。我按照一些教程来做到这一点，但在我的provider.ts文件中一次又一次地遇到同样的错误
'use client'
import { store } from './store';
import { Provider } from 'react-redux';
export function Providers({ children }: { children: React.ReactNode }) {
return <Provider store={store}>{children}</Provider>;
}
错误是：
'Provider' refers to a value, but is being used as a type here. Did you mean 'typeof Provider'?ts(2749)我已经卸载并重新安装了react-redux和其他软件包，我已经尝试更改我的eslintrc.json，但没有任何变化。从react-redux导入的Provider没有在return语句中使用，它在导入语句中仍然显示为灰色。
Redux 实现的其余部分在这里：
store.ts
'use client'
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './features/auth-slice';
export const store = configureStore({
reducer: {
auth: authReducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
auth-slice.ts
'use client'
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
export interface User {
isAuth: boolean;
id: string;
name: string;
isModerator: boolean;
}
export interface AuthState {
user: User | null;
}
const initialState: AuthState = {
user: null,
};
export const auth = createSlice({
name: 'auth',
initialState,
reducers: {
registerUser: (state, action: PayloadAction<Partial<User>>) => {
const { id, name } = action.payload;
state.user = {
isAuth: true,
id: id || '',
name: name || '',
isModerator: true,
};
},
changeName: (state, action: PayloadAction<string>) => {
if (state.user) {
state.user.name = action.payload;
}
},
},
});
export const { registerUser, changeName } = auth.actions;
export default auth.reducer;
最终实现在我的应用程序文件夹根目录下的layout.tsx中
import { Providers } from '@/redux/provider';
import './globals.css';
export const metadata = {
title: 'Coworking Pro',
description: 'Trouve ton coworking gratuit',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='fr'>
<body className='w-screen overflow-x-hidden'>
<Providers>{children}</Providers>
</body>
</html>
);
}
最后一个文件没有错误。
谢谢您的帮助
我重新安装了所有软件包，更改了一些配置文件（eslint）。我复制粘贴了一些实际有效的教程。但不适合我。
我也遇到了这个错误，我只是将文件名从 ts 更改为 tsx，忘记了 typescript 实际上会考虑是否有 jsx 。
您可以更改provider.ts->provider.tsx