Redux Toolkit – action.payload is: undefined

January 1, 2023

In this application, I am trying to delete post but, I am seeing action.payload is undefined in the console. The action.payload is defined in the addPost function. I cannot understand why it is undefined in the deletePost method. I am a beginner in using react and redux toolkit. Pardon if the question is lame.

Excerpt of the code is below.

import { createSlice, nanoid } from '@reduxjs/toolkit';
import { sub } from 'date-fns';

const initialState = {

  posts: [],
};

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {

    addPost: (state, action) => {
      state.posts.push(action.payload);
    },
    // deletePost 
    deletePost: (state, action) => { 
      console.log(`action.payload is: ${ action.payload }`);
      console.log(action);
      
    },
  },
});

export const selectAllPosts = (state) => state.posts.posts;

export const {
  addPost,
  deletePost,
} = postsSlice.actions;

export default postsSlice.reducer;

This is where I am using the deletePost

import { useSelector, useDispatch } from "react-redux";
import {
  deletePost
} from "../../features/posts/postsSlice";

const PostsList = () => {

  const posts = useSelector(selectAllPosts);

  const dispatch = useDispatch();

  const postInDescendingOrder = posts.slice().sort().reverse();

  const handlePostDeletion = () => { 
    dispatch(deletePost( posts.id ));
  };

  const renderedPosts = postInDescendingOrder.map((post) => (
    <article className="post-excerpt" key={post.id}>
      <h3>{post.title}</h3>
      <p className="post-content">{post.content}</p>
      <div className="action-buttons">
        <button className="delete" onClick={ handlePostDeletion }>Delete</button>
      </div>
    </article>
  ));

  return (
    <section className="posts-list">
      <h2>All Available Posts</h2>
      {
        posts.length > 0 ? renderedPosts : <p className="no-post">No Post to Display</p>
      }
    </section>
  );
};

export default PostsList;

Kindly add an explanation as to why the action.payload is undefined is happening

>Solution :

I think it’s because you didn’t pass post.id correctly to handlePostDeletion function.

try this:

const PostsList = () => {

  const posts = useSelector(selectAllPosts);

  const dispatch = useDispatch();

  const postInDescendingOrder = posts.slice().sort().reverse();

  const handlePostDeletion = (id) => { 
    dispatch(deletePost( id ));
  };

  const renderedPosts = postInDescendingOrder.map((post) => (
    <article className="post-excerpt" key={post.id}>
      <h3>{post.title}</h3>
      <p className="post-content">{post.content}</p>
      <div className="action-buttons">
        <button className="delete" onClick={()=> handlePostDeletion(post.id)}>Delete</button>
      </div>
    </article>
  ));

  return (
    <section className="posts-list">
      <h2>All Available Posts</h2>
      {
        posts.length > 0 ? renderedPosts : <p className="no-post">No Post to Display</p>
      }
    </section>
  );
};

export default PostsList;