I am getting undefined while sending patch request

Question

I am working on a MERN app with redux toolkit. Currently, I am facing a problem with my update functionality, when I click on the update button I can see in redux dev tools the request is rejected and in the console, the id is showing undefined while I am passing it. I am probably missing something in my code, if someone can point it out and explain that would be great. Thanks in advance. Here below are my code:

postService.js:

import axios from 'axios';

const API_URL = '/api/posts/';

const updatePost = async (_id, postData) => {
  const response = await axios.patch(API_URL + _id, postData);

  return response.data;
};

const postService = {
  updatePost,
};

export default postService;

postSlice.js:

    import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import postService from './postService';

const initialState = {
  posts: [],
  isError: false,
  isSuccess: false,
  isLoading: false,
  message: '',
};
        
        export const updatePost = createAsyncThunk(
'posts/updatePost',
  async ({ id, postData }, thunkAPI) => {
    const { postCreator, title, body, imageFile } = postData;
    try {
      return await postService.updatePost(id, {
        postCreator,
        title,
        body,
        imageFile,
      });
    } catch (error) {
      console.log(error.message);
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);
        
        export const postSlice = createSlice({
          name: 'post',
          initialState,
          reducers: {
            reset: (state) => initialState,
          },
          extraReducers: (builder) => {
            builder
        .addCase(updatePost.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(updatePost.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        const { id, postCreator, title, body, imageFile } = action.payload;
        const existingPost = state.find((post) => post.id === id);
        if (existingPost) {
          existingPost.postCreator = postCreator;
          existingPost.title = title;
          existingPost.body = body;
          existingPost.imageFile = imageFile;
        }
      })
      .addCase(updatePost.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
      })
        
        export default postSlice.reducer;

Form.js:

    const Form = ({ activeId, setActiveId }) => {
  const [postData, setPostData] = useState({
    postCreator: '',
    title: '',
    body: '',
    imageFile: '',
  });
  const post = useSelector((state) =>
    activeId ? state.posts.posts.find((post) => post._id === activeId) : null
  );
  const user = JSON.parse(localStorage.getItem('user'));
  const dispatch = useDispatch();

  useEffect(() => {
    if (post) setPostData(post);
  }, [post]);

  const clearInputField = () => {
    setActiveId(0);
    setPostData({
      postCreator: '',
      title: '',
      body: '',
      imageFile: '',
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (activeId) {
      dispatch(updatePost({ activeId, postData }));
      clearInputField();
    } else {
      dispatch(createPost(postData));
      clearInputField();
    }
  };

Answer 1

In the updatePost thunk in postSlice.js , you are attempting to destructure the variables { id, postData } from the payload creator args.

But in Form.js , you are sending an object { activeId, postData } when you dispatch updatePost .

So both id and postData will be undefined because neither exist on the object.

You could change it to:

dispatch(updatePost({id: activeId, postData: formData}))