Как добавить действие редактирования в React-Redux

Question

Я хочу выполнить действие редактирования на моей странице блога. У меня есть другие действия, такие как ДОБАВИТЬ, УДАЛИТЬ и ПОЛУЧИТЬ.

Есть ли какие-либо предложения по добавлению действия РЕДАКТИРОВАТЬ на то же самое и редактировать мой блог по нажатию кнопки?

Любая помощь будет полезна.

// Действие. 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)));
};

// Редуктор. 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]
   };

// Текущий пользовательский интерфейс

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

// Редуктор

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

Answer 2

Это также может поддерживаться на уровне компонента. Логический флаг с именем editBlog -> true / false.

Обновите состояние компонента с помощью переключение флага editBlog при нажатии кнопки редактирования блока.