英文:
Property 'app' does not exist on type 'WritableDraft<{ channelId: null; channelName: null; }>'
问题
我正在尝试使用 Tauri、React 和 Redux 构建聊天应用程序。然而,我遇到了这个错误。
Property 'app' does not exist on type 'WritableDraft<{ channelId: null; channelName: null; }>'.
导致这个错误的代码如下:
import { PayloadAction, createSlice } from '@reduxjs/toolkit';
import type { RootState } from '../app/store';
export const appSlice = createSlice({
name: 'app',
initialState: {
channelId: null,
channelName: null,
},
reducers: {
setChannelId: (state, action) => {
state.app += action.payload;
},
},
});
export const { setChannelId } = appSlice.actions;
export const selectChannelId = (state: RootState) => state.app.channelId;
export const selectChannelName = (state: RootState) => state.app.channelName;
export default appSlice.reducer;
我尝试将 app: null
添加到 initialState
中,像这样:
initialState: {
app: null,
channelId: null,
channelName: null,
},
这解决了错误,但我的应用程序无法渲染。
如果需要的话,这是我的 App.tsx
:
import { useSelector } from "react-redux";
import { selectUser } from "./features/userSlice";
import "./App.css";
import Sidebar from "./Sidebar";
import Chat from "./Chat";
function App() {
const user: any = useSelector(selectUser);
return (
<div className="app">
{user ? (
<>
<Sidebar />
<Chat />
</>
) : (
<h2>You need to log in</h2>
)}
</div>
)
}
export default App;
以及我的 store.ts
:
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';
import appReducer from '../features/appSlice';
export const store = configureStore({
reducer: {
user: userReducer,
app: appReducer,
}
});
// 推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>;
// 推断出的类型: {user: UserState}
export type AppDispatch = typeof store.dispatch;
我已经陷入困境很长时间了,所以任何帮助都将非常有用!
英文:
I am trying to build a chat app with Tauri, React and Redux. I however am stuck on this error.
Property 'app' does not exist on type 'WritableDraft<{ channelId: null; channelName: null; }>'.
This is the code that produces this error:
import { PayloadAction, createSlice } from '@reduxjs/toolkit';
import type { RootState } from '../app/store';
export const appSlice = createSlice({
name: 'app',
initialState: {
channelId: null,
channelName: null,
},
reducers: {
setChannelId: (state, action) => {
state.app += action.payload;
},
},
});
export const { setChannelId } = appSlice.actions;
export const selectChannelId = (state: RootState) => state.app.channelId;
export const selectChannelName = (state: RootState) => state.app.channelName;
export default appSlice.reducer;
I tried adding app: null
to the initialState
like so:
initialState: {
app: null,
channelId: null,
channelName: null,
},
This solved the error, but my app wouldn't render.
In case it's needed, here is my App.tsx
:
import { useSelector } from "react-redux";
import { selectUser } from "./features/userSlice";
import "./App.css";
import Sidebar from "./Sidebar";
import Chat from "./Chat";
function App() {
const user: any = useSelector(selectUser);
return (
<div className="app">
{user ? (
<>
<Sidebar />
<Chat />
</>
) : (
<h2>You need to log in</h2>
)}
</div>
)
}
export default App;
And my store.ts
:
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';
import appReducer from '../features/appSlice';
export const store = configureStore({
reducer: {
user: userReducer,
app: appReducer,
}
});
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {user: UserState}
export type AppDispatch = typeof store.dispatch;
I am stuck on this for a long time now, so all help would be great!
答案1
得分: 1
“app”状态切片的形状是{ channelId: null; channelName: null; }
。
因此,setChannelId
减速器逻辑应为:
setChannelId: (state, action) => {
state.channelId += action.payload;
},
英文:
The shape of the "app" state slice is { channelId: null; channelName: null; }
.
So the setChannelId
reducer logic should be:
setChannelId: (state, action) => {
state.channelId += action.payload;
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论