React and Redux: Passing Payload To Another Action Type

Viewed 294

I want to pass the payload that comes with the DELETE_ITEM action type to the DELETE_ITEM_SUCCESS action type so I can use that payload and do something with it as you can see in my middleware code below. DELETE_ITEM_SUCCESS by default does not come with a payload. It is just a message as you can see in my actions file below.

//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 DELETE_ITEM_SUCCESS = 'DELETE ITEM SUCCESS';
export const DELETE_ITEM_ERROR   = 'DELETE ITEM ERROR';

export const getItems = () => ({
  type: GET_ITEMS
    });
export const updateItems = (data) => ({
  type   : UPDATE_ITEMS,
  payload: data
});
    
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)
    }
    
    
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);

//Middleware

export const removeItemFlow = ({dispatch, getState}) => next => action => {
  next(action);

  if(action.type === DELETE_ITEM){
      dispatch(apiDeleteRequest(`https://jsonplaceholder.typicode.com/todos/${action.payload}`, 
      DELETE_ITEM_SUCCESS, DELETE_ITEM_ERROR));
     return next(action)
  }
  if(action.type === DELETE_ITEM_SUCCESS){
    const updateState = getState().items.itemsList.filter(item => item.id !== action.payload)
    dispatch(updateItems(updateState))
  }

};
0 Answers
Related