How to add Edit action in React-Redux

Question

I want to perform an edit action on my blog page. I have other action such as ADD, DELETE and GET.

Any suggestion to add EDIT action on the same and perform my blog editable on button click?

Any help would be helpful.

//Action.js

export const getBlog = () => dispatch => {
    dispatch(setResumesLoading());
    axios
        .get('/api/blogs')
        .then(res => 
            dispatch({
                type: types.GET_BLOG,
                payload: res.data
            })
        ).catch (err => dispatch (returnErrors(err.response.data, err.response.status)));
};

export const addBlog = blog => (dispatch, getState) => {
   axios
   .post('/api/blogs', blog, tokenConfig(getState))
   .then(res => 
    dispatch({
        type: types.ADD_BLOG,
        payload: res.data
    })).catch (err => dispatch (returnErrors(err.response.data, err.response.status)));
};



export const deleteBlog = id => (dispatch, getState) => {
    axios
    .delete(`/api/blogs/${id}`, tokenConfig(getState)).then(res => 
        dispatch({
            type: types.DELETE_BLOG,
            payload: id

        })).catch (err => dispatch (returnErrors(err.response.data, err.response.status)));
};

//Reducer.js

case types.GET_BLOG:
   return {
     ...state,
     blogs: action.payload,
     loading: false
   };
 case types.DELETE_BLOG:
   return {
    ...state,
    blogs: state.blogs.filter(blog => blog._id !== action.payload)
   };
 case types.ADD_BLOG:
   return {
     ...state,
     blogs: [action.payload, ...state.blogs]
   };

//Current UI

Answer 1

export const editBlog = (id, blog) => (dispatch, getState) => {
   axios
   .put(`/api/blogs/${id}`, blog, tokenConfig(getState))
   .then(res => 
    dispatch({
        type: types.EDIT_BLOG,
        payload: res.data
    })).catch (err => dispatch (returnErrors(err.response.data, 
     err.response.status)));
};

// Reducer

case types.EDIT_BLOG:
     return {
        ...state,
        updatedBlog: action.payload, // Or do what ever you want
        loading: false
};

Answer 2

This can be maintained at the component level also, A boolean flag called editBlog -> true/false.

Update the component state by toggling the editBlog flag on click of edit block button.