无法从动作创建者访问嵌套数据，该动作创建者从内容中获取数据

Question

所以我试图通过react-redux的连接从组件访问状态。该状态来自异步动作，从Contentful api获取数据。我很确定它是因为我正在使用article：action.article（此action.article具有嵌套数据）替换文章：{}。

以下是组件：

import React, { Component } from 'react';
import ReactMarkDown from 'react-markdown';
import { connect } from 'react-redux';
import { getArticle } from '../../actions/blog.actions';

class ArticlePage extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.props.getArticle(this.props.match.params.id)
    }
    render() {
        let {article} = this.props;
        return (
            <div className='article-page-wrapper'>
                <div className='navbar-background'></div>
                <div className='article-details'>
                    <img src={`https:${article}`} />
                </div>
                <ReactMarkDown className={'main-content'} source={article.blogContent} />
                {console.log(this.props.article)}
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        article: state.blogReducer.article
    }
}

function mapDispatchToProps(dispatch) {
    return {
        getArticle: (articleId) => {
            dispatch(getArticle(articleId));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ArticlePage);

以下是行动：

export function getArticle (articleId) {
    return function (dispatch) {
        dispatch(getArticleRequest())
        client.getEntries({'sys.id':`${articleId}`,include:1})
            .then((article) =>{
                console.log(article)
                dispatch(getArticleSuccess(article.items[0].fields));
            })
            .catch((error) => {
                dispatch(getArticleError(error));
            })
    }
}

export function getArticleRequest () {
    return {
        type: types.GET_ARTICLE_REQUEST
    }
}

export function getArticleSuccess (article) {
    return {
        type: types.GET_ARTICLE_SUCCESS,
        article: article
    }
}

export function getArticleError (error) {
    return {
        type: types.GET_ARTICLE_ERROR,
        error: error
    }
}

这是减速器：

import * as types from '../types/blog.types'; 

const initialState = {
    articles:[],
    article:[],
    error: null,
    loading: true
}

export default function blogReducer (state=initialState, action) {
    switch(action.type) {
        case types.GET_ALL_ARTICLES_REQUEST :
        return {...state, loading: true}

        case types.GET_ALL_ARTICLES_SUCCESS :
        return {...state,loading:false, articles:action.articles.items}    
        
        case types.GET_ALL_ARTICLES_ERROR :
        return {...state, loading:false, error: action.error}

        case types.GET_ARTICLE_REQUEST :
        return {...state, loading: true}

        case types.GET_ARTICLE_SUCCESS :
        return {...state,loading:false,article: action.article}
        
        case types.GET_ARTICLE_ERROR :
        return {...state, loading:false, error: action.error}

        default :
        return state
        }
}

以下是从Contentful中检索的数据的结构：

因此，当我尝试在src中为文章中的作者图像做article.authorImage.fields时，它在ArticlePage中失败了。以下是错误消息：

我很确定它是因为当状态中的空{}通过用getArticle中的嵌套数据替换它来更新时，它不会将newState设置为整个有效负载。

我很感激你能给予的任何帮助，如果确实是由于嵌套状态和突变，你可以提供一种方法来设置状态等于动作的有效负载。

Answer 1

在redux商店中设置文章时，您正在设置

article: article.items[0].fields

虽然您尝试访问this.props.article.fields中的字段，但您在字段下面有一个名为authorImage的字段，而这些字段又包含字段键，因此您必须使用

this.props.articles.authorImage.fields

在使用之前检查undefined属性，因为它最初可能不存在，只会在异步请求中填充