Проблема с Редуктором, который содержит несколько различных значений

Question

Привет, я новичок в React. js & Redux, поэтому я столкнулся с проблемой с Редукторами, надеюсь, вы поможете.

Я создаю сайт с главной страницей "Статьи" , Страница «Вопросы и ответы», в которой я создал каждый отдельный Редуктор, который отлично работает.

Проблема в «Главной странице», которая содержит много разных частей информации, и я не хочу чтобы создать каждый маленький кусочек информации на Редукторе, поэтому я пытаюсь создать один Редуктор, который будет обрабатывать много очень маленьких разных фрагментов информации, и я не могу заставить это работать внутри основного "Контента" "object, я поставил 2 пары значений ключа, каждая из которых имеет массив, по одной для каждой различной информации, одна для информации" Features "и одна для информации" Header ".

This это ошибка, которую я получаю:

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;
}

Answer 1

Предполагается, что функция-редуктор возвращает следующее состояние вашего приложения, но вы делаете здесь несколько вещей неправильно, вы возвращаете массив, часть состояния, а не объект состояния, я бы посоветовал вам взглянуть на immer для предотвращения подобных ошибок.

Простое исправление:

export default (state = defaultContentReducer, action) => {
    switch(action.type) {
        case 'ADD_FEATURE':
            return {...state, content: {...state.content. featuresContent: [...action.features, ...state.content.featuresContent]}}
        // More actions are handled here
        default:
            return state
    }
}

Если вы используете immer, у вас должно быть что-то вроде

export default (state = defaultContentReducer, action) => {
  const nextState = produce(state, draftState => {
     switch(action.type) {
        case 'ADD_FEATURE':
            draftState.content.featuresContent = [...draftState.content.featuresContent, ...action.features]
  });
            break;
        default:
            break;

  return nextState
}