redux 属性“app”在类型“WritableDraft< { channelId:null; channelName:}>'

cgyqldqp  于 2023-06-23  发布在  其他
关注(0)|答案(1)|浏览(100)

我正在尝试使用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,
    }
});

// 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;

我被困在这很长一段时间了,所以所有的帮助将是伟大的!

vptzau2j

vptzau2j1#

“app”状态切片的形状是{ channelId: null; channelName: null; }
所以setChannelId reducer逻辑应该是:

setChannelId: (state, action) => {
  state.channelId += action.payload;
},

相关问题