Почему компонент не обновляется при получении данных? ReactJS

У меня есть компонент, в котором я пытаюсь показать отдельную запись в своем приложении для блога. когда я захожу со страницы индекса, все работает нормально. Но когда я помещаю URL-адрес сообщения и перехожу прямо по этому пути (например, /posts/2357), возникает проблема. В моем инспекторе кода на вкладке «Сеть» я вижу данные этого поста, но по какой-то причине компонент не обновляется, и пользователь видит только бесконечный компонент «Загрузка ...».

Мой компонент:

class PostsShow extends Component {
    componentDidMount() {
        if (!this.props.post) {
            const { id } = this.props.match.params;
            this.props.fetchPost(id);
        }
    }

    render() {
        const { post } = this.props;
    // Check if we already have a post
        if (!post) {
            return <Loader />;
        }

        return (
            <div>
                <div className = "row m-t-2">
                    <h3>{post.title}</h3>
                    <span className = "m-b-2 label label-info">{post.categories}</span>
                    <p>{post.content}</p>
                </div>
            </div>
        );
     }
}

function mapStateToProps({ posts }, ownProps) {
    return { post: posts[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchPost })(PostsShow);

Действие:

export function fetchPost(id) {
    const request = axios.get(`${ROOT_URL}/posts/${id}${API_KEY}`);

    return {
        type: FETCH_POST,
        payload: request
    };
}

Редуктор:

export default function(state = {}, action) {
    switch (action.type) {
    case FETCH_POST:
        return { ...state, [action.payload.data]: action.payload.data  };
    default:
        return state;
    }
}