英文:
Provider not recognized from react-redux - NextJS RTK Typescript
问题
我正在尝试将Redux RTK集成到我的Next.js 13.4应用程序中。我遵循了一些教程来实现这一点，但我在我的provider.ts文件中一次又一次地遇到相同的错误。
错误信息是：
'Provider'引用了一个值，但在这里被用作类型。你是不是想要使用 'typeof Provider'？ts(2749)
我已经卸载并重新安装了react-redux和其他包，我已经尝试更改了我的eslintrc.json，但仍然没有改变。从react-redux导入的Provider在返回语句中没有被使用，它在导入语句中仍然显示为灰色。
Redux的其余部分实现在这里：
store.ts
'使用客户端'
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
'使用客户端'
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;
最后，在我的app文件夹的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），并复制粘贴了一些实际可工作的教程，但对我来说没有效果。
英文:
I am trying to integrate Redux RTK to my Next JS 13.4 app. I follow some tutorials to do that, but I get the same error again and again in my provider.ts file
'use client'
import { store } from './store';
import { Provider } from 'react-redux';
export function Providers({ children }: { children: React.ReactNode }) {
return <Provider store={store}>{children}</Provider>;
}
The error is :
'Provider' refers to a value, but is being used as a type here. Did you mean 'typeof Provider'?ts(2749)
I have already uninstalled and reinstalled react-redux and other packages, I already tried to change my eslintrc.json, but nothing changes. The Provider import from react-redux is not used in the return statement, it still appears grey tint in the import statement.
The rest of the Redux implementation is here:
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;
And the final implementation in my layout.tsx at the root of my app folder
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>
);
}
There is no error in this last file.
Thank you for your help
I reinstall all the packages, change some config files (eslint). I copy-pasted some tutorials that are actually working. But not for me.
答案1
得分: 1
我也遇到了这个错误，我只是将我的文件名从.ts更改为.tsx，忘记了 TypeScript 实际上是否考虑了是否有 JSX。
英文:
I encountered this error too, I just change my file name from ts to tsx, forget typescript actually takes to account if there is jsx or not.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论