0

我是 React.js 和 Redux 的新手，所以我遇到了 Reducers 的问题。

我正在创建一个具有主“文章”页面、“问答”页面的站点，我为每个页面创建了一个单独的 Reducer，它们都可以正常工作。

问题出在“主页”中，其中包含许多不同的小信息，我不想在 Reducer 上创建每一个不同的小信息，所以我正在尝试创建一个可以处理很多事情的 Reducer非常小的不同信息片段，我无法让它工作，在主要的“内容”对象中，我放置了 2 个键值对，每个键值对都有一个数组，一个用于每个不同的信息，一个是“功能”信息，一个用于“标题”信息。

这是我得到的错误：

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

1 回答 1

1

reducer 函数应该返回应用程序的下一个状态，但是您在这里做错了一些事情，您返回的是一个数组，一个状态而不是状态对象，我建议您查看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
}
于 2020-02-03T14:48:08.947 回答