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))
}
};