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

Question

У меня есть компонент, в котором я пытаюсь показать один пост в своем приложении блога.когда я прихожу со страницы индекса все работает нормально.Но когда я помещаю 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;
    }
}

Answer 1

Похоже, что-то не так в вашем редукторе. Вы устанавливаете ключ объекта вашего состояния на [action.payload.data], а также устанавливаете значение этого объекта на [action.payload.data]. Разве вы не должны установить значение ключа на [action.payload.data.id]?