React Problem

TypeScript type assertion

Property 'reaction' does not exist on type 'PostData'.

fix commit

ReactionButtons.tsx

import { useAppDispatch } from "../../hooks";
import { reactionAdded, type PostData, type Reactions } from "./postsSlice";

const reactionEmoji: Record<keyof Reactions, string> = {
  thumbsUp: "👍",
  wow: "😮",
  heart: "❤️",
  rocket: "🚀",
  coffee: "☕",
};

const ReactionButtons = ({ id, reactions }: PostData) => {
  const dispatch = useAppDispatch();
  const reactionButtons = Object.entries(reactionEmoji).map(([name, emoji]) => {
    const reaction = name as keyof Reactions;
    return (
      <button
        key={name}
        className="reactionButton"
        onClick={() => dispatch(reactionAdded({ postId: id, reaction }))}
      >
        {emoji} {reactions[reaction]}
      </button>
    );
  });
  return <div>{reactionButtons}</div>;
};

export default ReactionButtons;

fix commit

postsSlice.ts

const postsSlice = createSlice({
  name: "postSlice",
  initialState,
  reducers: {
    postAdded: {
      reducer: (state, action: PayloadAction<PostData>) => {
        state.push(action.payload);
      },
      prepare: (title: string, content: string, userId: string) => {
        return {
          payload: {
            id: nanoid(),
            title,
            content,
            userId,
            date: new Date().toISOString(),
            reactions: {
              thumsUp: 0,
              wow: 0,
              heart: 0,
              rocket: 0,
              coffee: 0,
            },
          },
        };
      },
    },

    // The issue is that reactionAdded is expecting a different payload type. 
    // It needs id and reaction, not the full PostData. Here's the corrected code:
    reactionAdded: (
      state,
      action: PayloadAction<{ postId: string; reaction: keyof Reactions }>
    ) => {
      const { postId, reaction } = action.payload;
      const existingPost = state.find((post) => post.id === postId);
      if (existingPost) {
        existingPost.reactions[reaction]++;
      }
    },
  },
});

useAppDispatch Called Incorrectly: Expected 0 Arguments, Got 1

const dispatch = useAppDispatch();
const savePost = () => {
    if (title && content) {
        dispatch(postAdded({ id: nanoid(), title, content }));
        setContent("");
        setTitle("");
    }
};

Cannot find module '@rollup/rollup-win32-x64-msvc'

\node_modules\.pnpm\rollup@4.53.3\node_modules\rollup\dist\native.js:92:76)
[cause]: Error: Cannot find module '@rollup/rollup-win32-x64-msvc'
  Require stack:

I definately use a win nodejs package in windows system, node-v24.12.0-win-x64.zip.

Maybe try to install another vite version vite 7.2.7, meanwhile auto download the missing module.

Or you can mannually move the directory to %LOCALAPPDATA%\pnpm\global\5\.pnpm from a online machine.