title: Getting error TypeError: Cannot read property 'id' of undefined using React/Redux action
body: <p>I am using react/redux and the error is happening after a deleteRequest is called using an action. The reducer removes the item from the array and I think that is why this is happening, but I should be changing the location so it should not be rendering this page anymore. </p>
  
  <p>The direct error is coming from the Post component down below from the <code>this.props.deleteRecord</code> in the catch block.</p>
  
  <p>I am also using turbo which is how I make the deleteRequest and store the data. If you need a reference here is the docs. <a href="https://www.turbo360.co/docs" rel="nofollow noreferrer">https://www.turbo360.co/docs</a></p>
  
  <p>Reducer:</p>
  
  <pre><code>import constants from '../constants';
  
  const initialState = {
    all: null
  };
  
  export default (state = initialState, action) =&gt; {
    switch (action.type) {
      case constants.POST_CREATED:
        return {
          ...state,
          all: state.all.concat(action.data),
          [action.data.id]: action.data
        };
  
      case constants.RECORD_UPDATED:
        return {
          ...state,
          [action.data.id]: action.data,
          all: all.map(item =&gt; (item.id === action.data.id ? action.data : item))
        };
  
      case constants.RECORD_DELETED:
        const newState = {
          ...state,
          all: state.all.filter(item =&gt; item.id !== action.data.id)
        };
        delete newState[action.payload.id];
  
        return newState;
  
      case constants.FETCH_POSTS:
        const sortedData = action.data.sort((a, b) =&gt; {
          return new Date(b.timestamp) - new Date(a.timestamp);
        });
        return { ...state, all: sortedData };
  
      case constants.FETCH_POST:
        return { ...state, [action.data.id]: action.data };
  
      default:
        return state;
    }
  };
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import swal from 'sweetalert2/dist/sweetalert2.all.min.js';
  
  import actions from '../../actions';
  import { DateUtils } from '../../utils';
  import { Reply } from '../containers';
  import { UpdateRecord } from '../view';
  
  class Post extends Component {
    constructor() {
      super();
      this.state = {
        editShow: false
      };
    }
  
    componentDidMount() {
      const { id } = this.props.match.params;
      if (this.props.posts[id] != null) {
        return;
      }
      this.props
        .getRecord(id)
        .then(() =&gt; {})
        .catch(err =&gt; {
          console.log(err);
        });
    }
  
    updateRecord(params) {
      const { id } = this.props.match.params;
      const post = this.props.posts[id];
      const { currentUser } = this.props.user;
      if (post.profile.id !== currentUser.id) {
        swal({
          title: 'Oops...',
          text: 'Must be owner of post',
          type: 'error'
        });
        return;
      }
  
      this.props
        .updateRecord(post, params)
        .then(response =&gt; {
          swal({
            title: 'Success',
            text: `${currentUser.username} Your post has been updated!`,
            type: 'success'
          });
        })
        .catch(err =&gt; {
          console.log(err);
        });
    }
  
    deleteRecord() {
      const { id } = this.props.match.params;
      const post = this.props.posts[id];
      const { currentUser } = this.props.user;
  
      if (currentUser.id !== post.profile.id) {
        swal({
          title: 'Oops...',
          text: 'Must be owner of post',
          type: 'error'
        });
        return;
      }
  
      this.props
        .deleteRecord(post)
        .then(() =&gt; {
          this.props.history.push('/');
  
          swal({
            title: 'Post Delete',
            text: 'Please create a new post',
            type: 'success'
          });
        })
        .catch(err =&gt; {
          console.log(err);
        });
    }
  
    render() {
      const { id } = this.props.match.params;
      const post = this.props.posts[id];
      const { currentUser } = this.props.user;
      if (post == null) {
        return &lt;div /&gt;;
      }
  
      return (
        &lt;div&gt;
          &lt;div className="jumbotron"&gt;
            &lt;h1 className="display-3"&gt;{post.title}&lt;/h1&gt;
            &lt;div className="row" style={{ marginBottom: '25px' }}&gt;
              &lt;img className="img-fluid mx-auto" src={`${post.image}`} style={{ maxHeight: '400px' }} /&gt;
            &lt;/div&gt;
            &lt;p className="lead"&gt;{post.text}&lt;/p&gt;
            &lt;hr className="my-4" /&gt;
            {post.video == undefined ? null : (
              &lt;div className="row justify-content-center"&gt;
                &lt;div className="col-8"&gt;
                  &lt;div className="lead" style={{ marginBottom: '25px' }}&gt;
                    &lt;div className="embed-responsive embed-responsive-16by9"&gt;
                      &lt;video style={{ background: 'black' }} width="800" controls loop tabIndex="0"&gt;
                        &lt;source src={post.video} type={post.videoType} /&gt;
                        Your browser does not support HTML5 video.
                      &lt;/video&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            )}
            &lt;div className="lead"&gt;
              &lt;Link to={`/profile/${post.profile.id}`}&gt;
                &lt;button className="btn btn-secondary btn-lg"&gt;{post.profile.username}&lt;/button&gt;
              &lt;/Link&gt;
              &lt;p style={{ marginTop: '10px' }}&gt;{DateUtils.relativeTime(post.timestamp)}&lt;/p&gt;
            &lt;/div&gt;
            {currentUser.id !== post.profile.id ? null : (
              &lt;div className="row justify-content-end"&gt;
                &lt;div className="col-md-2"&gt;
                  &lt;button
                    onClick={() =&gt; {
                      this.setState({ editShow: !this.state.editShow });
                    }}
                    className="btn btn-success"
                  &gt;
                    Edit
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div className="col-md-2"&gt;
                  &lt;button onClick={this.deleteRecord.bind(this)} className="btn btn-danger"&gt;
                    Delete
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            )}
          &lt;/div&gt;
          {this.state.editShow === false ? null : (
            &lt;div&gt;
              &lt;UpdateRecord onCreate={this.updateRecord.bind(this)} currentRecord={post} /&gt;
            &lt;/div&gt;
          )}
          &lt;div&gt;
            &lt;Reply postId={post.id} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const stateToProps = state =&gt; {
    return {
      posts: state.post,
      user: state.user
    };
  };
  
  const dispatchToProps = dispatch =&gt; {
    return {
      getRecord: id =&gt; dispatch(actions.getRecord(id)),
      updateRecord: (entity, params) =&gt; dispatch(actions.updateRecord(entity, params)),
      deleteRecord: entity =&gt; dispatch(actions.deleteRecord(entity))
    };
  };
  
  export default connect(stateToProps, dispatchToProps)(Post);
  </code></pre>