What's wrong with this reducer since it cant recognize a json I think

Question

I learn React Redux and got stuck probably on how to set up my reducer so it understand that it's a json file my Redux-Saga is fetching. I have tested and the Sagais getting the json and my reducer saves it but then the function Hero({ articles }) {.... complains that the:

TypeError: Cannot read property 'label' of undefined

and label is a Nod in my json!

function Hero({ articles }) {
    return (
        <section className="hero is-dark is-fullheight has-bg-image">
            <div className="hero-head">
                <NavBar />
            </div>
            <div className="hero-body">
                <div className="container">
                    <p className="subtitle is-5 has-text-weight-light">I'm a</p>
                    <h1 className="title">{articles.basics.label}</h1>
                    <h2 className="subtitle">
                        {articles.basics.location.region}, {articles.basics.location.country}
                    </h2>
                    <div>
                        <p className="subtitle is-5 has-text-weight-light">{articles.basics.description}</p>
                    </div>
                    <div className="navbar-item  is-6   is-unselectable">{articles.basics.fansite}</div>
                    <div className="navbar-item  is-6   is-unselectable">{articles.basics.fansiteDev}</div>
                </div>
            </div>

            <div className="hero-foot" style={{ paddingBottom: '20px' }}>
                <div className="columns is-mobile">
                    <div className="column" />
                    {articles.basics.profiles.map(value => {
                        const id = uniqueId();
                        return (
                            <div key={id} className="column has-text-centered">
                                <a href={value.url} target="blank" className="is-hovered" title={value.network}>
                                    <span className="icon is-medium is-">
                                        <i className={value.x_icon} />
                                    </span>
                                </a>
                            </div>
                        );
                    })}
                    <div className="column" />
                </div>
            </div>
            <div
                style={{
                    position: 'static',
                    color: 'gray',
                    fontSize: '.875rem',
                }}
            >
                <ShowBuildAndVersion />
            </div>
        </section>
    );
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.articles };
};

const Aaa = connect(mapStateToProps)(Hero);
export default Aaa;

And here is the reducer:

import { FOUND_BAD_WORD, DATA_LOADED, ADD_ARTICLE } from '../constants/action-types';

const initialState = {
    articles: [],
    remoteArticles: [],
    badword: '',
};

export default function reducer(state = initialState, action) {
    if (action.type === ADD_ARTICLE) {
        return { ...state, articles: state.articles.concat(action.payload) };
    }

    if (action.type === FOUND_BAD_WORD) {
        return Object.assign({}, state, {
            badword: state.badword = action.payload[0],
        });
    }

    if (action.type === DATA_LOADED) {
        return { ...state, remoteArticles: action.payload };
    }
    return state;
}

Answer 1

articles is an array in your reducer, but you're treating it as an object in your component. That's why you're getting undefined errors.