Question

我开始做出反应和还原，我使用 combineReducers 并获得

未捕获的TypeError：无法将undefined或null转换为object。

没有combineReducer它工作正常。下面是我的减速机的片段。

减速器\ 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;

减速器\ index.js

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

export default combineReducers({
articles : articleReducer
});

操作\ index.js

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

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

商品/ 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;

部件\ 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状态现在包含一个包含文章对象的文章数组。

然后，改变你的reducer return语句：

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

现在，如果您想要除文章中的文章以外的其他一些内容，您可以改变您的州的形状。例如：

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

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

Reducer就是这样的：

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

Redux combineReducers Uncaught Type错误：无法将undefined或null转换为object

1 个答案: