“app”属性在类型’WritableDraft<{ channelId: null; channelName: null; }>‘上不存在。

huangapple
go评论84阅读模式
英文:

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; }>'.

导致这个错误的代码如下：

  1. import { PayloadAction, createSlice } from '@reduxjs/toolkit';
  2. import type { RootState } from '../app/store';
  4. export const appSlice = createSlice({
  5.     name: 'app',
  6.     initialState: {
  7.         channelId: null,
  8.         channelName: null,
  9.     },
  10.     reducers: {
  11.         setChannelId: (state, action) => {
  12.             state.app += action.payload;
  13.         },
  14.     },
  15. });
  17. export const { setChannelId } = appSlice.actions;
  19. export const selectChannelId = (state: RootState) => state.app.channelId;
  20. export const selectChannelName = (state: RootState) => state.app.channelName;
  22. export default appSlice.reducer;

我尝试将 app: null 添加到 initialState 中，像这样：

  1.     initialState: {
  2.         app: null,
  3.         channelId: null,
  4.         channelName: null,
  5.     },

这解决了错误，但我的应用程序无法渲染。

如果需要的话，这是我的 App.tsx：

  1. import { useSelector } from "react-redux";
  2. import { selectUser } from "./features/userSlice";
  4. import "./App.css";
  5. import Sidebar from "./Sidebar";
  6. import Chat from "./Chat";
  8. function App() {
  9.   const user: any = useSelector(selectUser);
  11.   return (
  12.     <div className="app">
  13.       {user ? (
  14.         <>
  15.           <Sidebar />
  16.           <Chat />
  17.         </>
  18.       ) : (
  19.         <h2>You need to log in</h2>
  20.       )}
  22.     </div>
  23.   )
  24. }
  26. export default App;

以及我的 store.ts：

  1. import { configureStore } from '@reduxjs/toolkit';
  2. import userReducer from '../features/userSlice';
  3. import appReducer from '../features/appSlice';
  5. export const store =  configureStore({
  6.     reducer: {
  7.         user: userReducer,
  8.         app: appReducer,
  9.     }
  10. });
  12. // 推断出 `RootState` 和 `AppDispatch` 类型
  13. export type RootState = ReturnType<typeof store.getState>;
  15. // 推断出的类型: {user: UserState}
  16. 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 &#39;app&#39; does not exist on type &#39;WritableDraft&lt;{ channelId: null; channelName: null; }&gt;&#39;.

This is the code that produces this error:

  1. import { PayloadAction, createSlice } from &#39;@reduxjs/toolkit&#39;;
  2. import type { RootState } from &#39;../app/store&#39;;
  4. export const appSlice = createSlice({
  5.     name: &#39;app&#39;,
  6.     initialState: {
  7.         channelId: null,
  8.         channelName: null,
  9.     },
  10.     reducers: {
  11.         setChannelId: (state, action) =&gt; {
  12.             state.app += action.payload;
  13.         },
  14.     },
  15. });
  17. export const { setChannelId } = appSlice.actions;
  19. export const selectChannelId = (state: RootState) =&gt; state.app.channelId;
  20. export const selectChannelName = (state: RootState) =&gt; state.app.channelName;
  22. export default appSlice.reducer;

I tried adding app: null to the initialState like so:

  1.     initialState: {
  2.         app: null,
  3.         channelId: null,
  4.         channelName: null,
  6.     },

This solved the error, but my app wouldn't render.

In case it's needed, here is my App.tsx:

  1. import { useSelector } from &quot;react-redux&quot;;
  2. import { selectUser } from &quot;./features/userSlice&quot;;
  4. import &quot;./App.css&quot;;
  5. import Sidebar from &quot;./Sidebar&quot;;
  6. import Chat from &quot;./Chat&quot;;
  8. function App() {
  9.   const user: any = useSelector(selectUser);
  11.   return (
  12.     &lt;div className=&quot;app&quot;&gt;
  13.       {user ? (
  14.         &lt;&gt;
  15.         &lt;Sidebar /&gt;
  16.         &lt;Chat /&gt;
  17.         &lt;/&gt;
  18.       ) : (
  19.         &lt;h2&gt;You need to log in&lt;/h2&gt;
  20.       )}
  22.     &lt;/div&gt;
  23.   )
  24. }
  26. export default App;

And my store.ts:

  1. import { configureStore } from &#39;@reduxjs/toolkit&#39;;
  2. import userReducer from &#39;../features/userSlice&#39;;
  3. import appReducer from &#39;../features/appSlice&#39;;
  5. export const store =  configureStore({
  6.     reducer: {
  7.         user: userReducer,
  8.         app: appReducer,
  9.     }
  10. });
  12. // Infer the `RootState` and `AppDispatch` types from the store itself
  13. export type RootState = ReturnType&lt;typeof store.getState&gt;;
  15. // Inferred type: {user: UserState}
  16. 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 减速器逻辑应为：

  1. setChannelId: (state, action) =&gt; {
  2.   state.channelId += action.payload;
  3. },
英文:

The shape of the "app" state slice is { channelId: null; channelName: null; }.

So the setChannelId reducer logic should be:

  1. setChannelId: (state, action) =&gt; {
  2.   state.channelId += action.payload;
  3. },

huangapple
  • 本文由 发表于 2023年6月12日 03:08:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76452111.html
  • redux
  • redux-toolkit
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定