Unable to update reducer state in redux - redux

Question

I have a redux app which enables users to post something(like a blog post which contains only a title and body).The user can edit the post whenever they want to.I am not able to update the reducer,i.e. I just want to update the title and the body for that particular "id". I am trying to update the state in my reducer as shown below:
case SUBMIT_POST:
let id = action.payload.id;
return {
...state,
[id]: {
...state[id],
title: action.payload.title,
body: action.payload.body
}
};
My action-creator looks like this:
//Action creator for submitting edited post
export function submitEditedPost(id, values, callback) {
const request = axios.put(`${API}/posts/${id}`, {values}, {headers});
return dispatch => {
return request.then((res) => {
callback();
console.log(res.data.values)
dispatch({
type:SUBMIT_POST,
payload: res.data.values
})
})
}
}
How to update the reducer with the new edited title and body for that particular post id?
EDIT 1:
I am calling the action creator in my form onSubmit() method as shown below:
onSubmit(values) {
const { id } = this.props.match.params;
const formData = {};
for (const field in this.refs) {
formData[field] = this.refs[field].value;
}
formData.id = id;
console.log('-->', formData);
this.props.submitEditedPost(id, formData, () => {
this.props.history.push('/');
});
}
EDIT 2: Screenshot of the action in reducer is shown below:
EDIT 3: My entire reducer:
import _ from 'lodash';
import { FETCH_POSTS, FETCH_POST, CREATE_POST, EDIT_POST, SUBMIT_POST } from '../actions/posts_action';
export default function(state = {posts: {} }, action) {
switch (action.type) {
case FETCH_POST:
// const post = action.payload.data;
// const newState = { ...state, };
// newState[post.id] = post;
// return newState;
return {...state, [action.payload.id]: action.payload};
case FETCH_POSTS:
return {posts: { ...state.posts, ...(_.mapKeys(action.payload,'id'))}};
case CREATE_POST:
return {...state, [ action.payload.id]: action.payload};
case EDIT_POST:
return { ...state, [action.payload.id]: action.payload};
case SUBMIT_POST:
console.log(action.payload);
let id = action.payload.id;
return {
...state,
[id]: {
...state[id],
title: action.payload.title,
body: action.payload.body
}
};
default:
return state;
}
}
EDIT 4 : Screenshot of redux-dev-tools: