Redux combineReducers 未捕获类型错误：无法将 undefined 或 null 转换为对象

Question

我开始反应和减少，我已经使用 combineReducers 并得到 ​​p>

未捕获的类型错误：无法将未定义或 null 转换为对象。

没有 combineReducer 它工作正常。下面是我的 Reducer 的 sn-p。

reducers\article.js：

import { ADD_ARTICLE } from "../actiontypes/action-types";

const initialState = {
articles: []
};

const articleReducer = (state = initialState, action) => {

switch (action.type){
case ADD_ARTICLE:
return {...state, articles: [...state.articles, action.payload] };
default:
return state;
}
};

export default articleReducer;

reducers\index.js

import { combineReducers } from "redux";
import articleReducer from "./article";

export default combineReducers({
articles : articleReducer
});

actions\index.js

import {ADD_ARTICLE} from "../actiontypes/action-types";

export const addArticle = article => ({type: ADD_ARTICLE, payload: article});

store/index.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const initialArticlesState = {
    articles: [{"title":"some title", "id":"04503"}]
};

const middleware = [thunk];
const store = createStore(
    rootReducer,
    initialArticlesState,
    compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()  
    )

);

export default store;

components\form.js

import React, { Component } from "react";
import { connect } from "react-redux";
import uuidv1 from "uuid";
import { addArticle } from "../js/actions/index";

class ConnectedForm extends Component {
    constructor(){
        super();
        this.state = {
            title: ""
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {

        event.preventDefault();
        const { title } = this.state;
        const id = uuidv1();
        console.log("submit",{ title, id });
        this.props.addArticle();
        this.setState({ title: "" });
    }

    handleChange(event) {
        this.setState({ [event.target.id]: event.target.value});
    }

    render() {
        const { title } = this.state;
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                <label htmlFor="title">Title</label>
                <input
                    type="text"
                    className="form-control"
                    id="title"
                    value={title}
                    onChange={this.handleChange}
                />
                </div>
                <button type="submit" className="btn btn-success btn-lg">
                SAVE
                </button>
            </form>
        );
    }
}

const mapDispatchToProps = dispatch => {
    return {
        addArticle: article => dispatch(addArticle(article))
    };
};

const Form = connect(null, mapDispatchToProps)(ConnectedForm);

export default Form;

Answer 1

首先像这样改变你的initialArticleState：

const initialArticlesState = [
    { title: "some title", id: "04503" },
];

您可能希望将状态作为对象数组。那些对象是文章吧？因此，当您设置初始状态时，由于 combineReducers，您正在公开文章状态。您的顶级 redux 状态现在包括一个包含文章对象的文章数组。

然后，像这样更改您的减速器返回语句：

return [ ...state, action.payload ];

现在，如果您想要文章状态中的文章以外的其他内容，当然可以更改状态形状。例如：

const initialArticlesState = {
    articles: [
        { title: "some title", id: "04503" },
    ],
    totalArticleNumber: 1,
};

如果您这样做，那么您将拥有一个文章状态，其中包括文章和总文章编号。在这种情况下，您可能想更改状态名称。

Reducer 是这样的：

return { ...state, articles: [ ...state.articles, action.payload ] };