React and Redux: Onclick Delete Button Returning Undefined

Question

In my code below, I have a delete button that should be deleting the data if clicked. However, when I click on it, I am seeing through console.log that it is returning undefined instead of the id number. Can't seem to figure out why. Any help will be greatly appreciated. Thank you.

//Actions File

export const GET_ITEMS           = 'GET ITEMS';
export const FETCH_ITEMS_SUCCESS = 'FETCH ITEMS SUCCESS';
export const FETCH_ITEMS_ERROR   = 'FETCH ITEMS ERROR';
export const DELETE_ITEM         = 'DELETE_ITEM';

    export const getItems = () => ({
      type: GET_ITEMS
    });
    
    export const deleteItem = (itemId) => ({
      type   : DELETE_ITEM,
      payload: itemId
    });

//App.js

    class App extends Component {
      componentDidMount() {
        this.props.getItems()
      }
    
    static propTypes = {
      getItems: PropTypes.func.isRequired,
      deleteItem: PropTypes.func.isRequired
    }
    handleDelete = (id) =>{
      this.props.deleteItem(id)
      console.log(this.props.deleteItem(id));
    }
    
    
      render() {
    const { itemsList} = this.props.items
        return (
          <div className="container app-wrapper">
            <header>
            {itemsList.map(item => (<h1 key={item.id}>{item.title} <button onClick={this.handleDelete.bind(this, item.id)}>delete</button></h1>))}
            </header>
          </div>
        );
      }
    }
    
    const mapStateToProps = state => ({
      items: state.items
    });
    export default connect(mapStateToProps, {getItems, deleteItem})(App);

you did a console.log(id) in handleDelete function and it returns undefined ? and can we see the reducer ? — VersifiXion
– VersifiXion, Commented Dec 4, 2020 at 20:47
No when I console.log(id) it returns the correct id. However, when i console.log(this.props.deleteItem(id)) it returns undefined. — tim_woods
– tim_woods, Commented Dec 4, 2020 at 20:55
console.log(this.props.deleteItem(id)) can't return you an other value, and does it correctly delete your item ? — VersifiXion
– VersifiXion, Commented Dec 4, 2020 at 20:57

Brian Thompson · Accepted Answer · 2020-12-04 20:55:50Z

2

The dispatched action should return undefined, because it does not return anything. You are misunderstanding how data flows in the Redux/reducer pattern.

Here's the basic flow of a Redux update:

Action is dispatched.
All reducers receive the action object.
All reducers return their new or previous state depending on that action's contents.
connect sees that the Redux state has changed, and triggers a re-render of the children components.
You may now use the updated data from your Redux store through props (mapped in mapStateToProps).

You cannot call an action and receive the updated state as the return value. It breaks the fundamental pattern of how data flows/updates in Redux.

edited Dec 4, 2020 at 20:55

answered Dec 4, 2020 at 20:48

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tim_woods Over a year ago

Thank you Brian. That makes sense

tim_woods Over a year ago

Finally resolved the issue. Thank you for this step-by-step explanation.

user14361391 · Accepted Answer · 2020-12-04 21:27:02Z

0

You are referencing your delete action incorrectly in connect. deleteItem expects an id param passed into it.

Try this,

const mapStateToProps = state => ({
      items: state.items
    });

const mapDispatchToProps = (dispatch) =>
{
    return {
        deleteItem: (id) => dispatch(actions.deleteItem(id)),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

answered Dec 4, 2020 at 21:27

user14361391

1 Comment

Brian Thompson Over a year ago

You don't have to do this... The mapping will keep the function signature and bind dispatch automatically. This just adds an extra function with no extra functionality.

Collectives™ on Stack Overflow

React and Redux: Onclick Delete Button Returning Undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related