Reactjs 包含很少不同值的减速器存在问题

我对React.js和Redux有点陌生，所以我遇到了一个关于reducer的问题

我正在创建一个网站，有一个主要的“文章”页面，“问题与答案”页面，我为每个页面创建了一个单独的减速机，两者都工作得很好

问题在于“主页”中包含大量不同的小信息，我不想在它的Reducer上创建每个不同的小信息，所以我尝试创建一个Reducer，它将处理大量非常小的不同的信息，但我无法做到这一点，在主“Content”对象中，我放置了两个键值对，每个键值对都有一个数组，一个用于不同的信息，一个用于“Features”信息，另一个用于“Header”信息

这是我得到的错误：

Uncaught TypeError: Cannot read property 'headerContent' of undefined
    at push../src/reducers/ContentReducer.js.__webpack_exports__.default (ContentReducer.js:15)

我不确定问题出在哪里，可能是我的代码错了，也可能是我使用了扩展运算符，有什么解决办法吗

我已经从我的代码中添加了必要的页面：

操作文件

export const addFeatureAction = (
    {
        title = 'Default feature title',
        feature = 'Default feature',
    } = {}) => ({
        type: 'ADD_FEATURE',
        features: {
            id: uuid(),
            title,
            feature
        }
})

export const addHeaderAction = (
    {
        title = 'Default header title',
        head = 'Default header',
    } = {}) => ({
        type: 'ADD_HEADER',
        header: {
            id: uuid(),
            title,
            head
        }
})

缩减器文件：

const defaultContentReducer = {
    content: {
        featuresContent: [],
        headerContent: [],
    }
}

export default (state = defaultContentReducer, action) => {
    switch(action.type) {
        case 'ADD_FEATURE':
            return [
                ...state.content.featuresContent,
                action.features
            ]
        case 'ADD_HEADER':
            return [
                ...state.content.headerContent,
                action.header
            ]
        default:
            return state
    }
}

export default () => {
    const store = createStore(
        combineReducers({
            articles: ArticleReducer,
            qnaList: QnaReducer,
            content: ContentReducer
        })
    );
    return store;
}

存储文件：

const defaultContentReducer = {
    content: {
        featuresContent: [],
        headerContent: [],
    }
}

export default (state = defaultContentReducer, action) => {
    switch(action.type) {
        case 'ADD_FEATURE':
            return [
                ...state.content.featuresContent,
                action.features
            ]
        case 'ADD_HEADER':
            return [
                ...state.content.headerContent,
                action.header
            ]
        default:
            return state
    }
}

export default () => {
    const store = createStore(
        combineReducers({
            articles: ArticleReducer,
            qnaList: QnaReducer,
            content: ContentReducer
        })
    );
    return store;
}

---

reducer函数应该返回应用程序的下一个状态，但是您在这里做了一些错误的事情，您返回的是一个数组，一段状态，而不是state对象，我建议您仔细研究以防止此类错误

简单修复：

导出默认值（state=defaultContentReducer，action）=>{
开关（动作类型）{
案例“添加功能”：
返回{…state，content:{…state.content.featuresContent:[…action.features，…state.content.featuresContent]}
//这里处理更多的操作
违约：
返回状态
}
}

如果你使用immer，你应该有这样的东西

导出默认值（state=defaultContentReducer，action）=>{
const nextState=product（state，draftState=>{
开关（动作类型）{
案例“添加功能”：
draftState.content.featuresContent=[…draftState.content.featuresContent，…action.features]
});
打破
违约：
打破
返回下一状态
}