Question

我正在尝试学习Redux（与ReactJS结合使用），当我尝试添加文章标题时，应用程序崩溃并读取以下内容：

尝试传播不可迭代的实例无效

因此，我尝试通过将代码输出到控制台来调试我的代码，的确获得了ID和标题，但是在分派ADD_ARTICLE操作时，它不起作用。

这是有问题的特定代码：

减速器

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

const initialState = {
    articles: []
}

export default ( state = initialState, action ) => {
    switch ( action.type ) {
        case ADD_ARTICLE:
            return [ ...state, action.article ] // Problem line
        default:
            return state
    }
}

动作生成器

import { ADD_ARTICLE } from "../constants/action-types";
import uuid from 'uuid'

export const addArticle = ( { title } = {} ) => {
    return {
        type: ADD_ARTICLE,
        // the payload
        article: {
            id: uuid(),
            title
        }
    }
}

表单组件

import React, { useState } from 'react'
import { connect } from 'react-redux'
import { addArticle } from '../actions/index'

const Form = props => {
    const [title, setTitle] = useState( '' ) // using react hooks

    const handleChange = e => {
        setTitle( e.target.value )
    }

    const handleSubmit = e => {
        e.preventDefault()
        props.addArticle( { title } ) // this is where the action is dispatched
        setTitle( '' )
    }

    return (
        <form onSubmit={ handleSubmit }>
            <label>Title</label>
            <input
                type="text"
                id="title"
                value={ title }
                onChange={ handleChange }
            />
            <button>SAVE</button>
        </form>
    )
}

const mapDispatchToProps = dispatch => {
    return {
        addArticle: article => dispatch( addArticle( article ) ) // dispatching the action
    }
}

export default connect( null, mapDispatchToProps )( Form )

预期结果应该是将新文章标题添加到基本列表中。我确实有可以使用的三个文章标题的种子，但是当我要添加文章标题时，它会显示上述错误消息。

感谢您的帮助！

Answer 1

问题在于您的状态是一个对象

const initialState = {
    articles: []
}

但是在这里：

case ADD_ARTICLE:
            return [ ...state, action.article ] // Problem line

您正在尝试将对象传播到数组中，并且还将状态更改为数组。你不应该这样做。

只是文章会改变

我将其更改为

case ADD_ARTICLE:
     return { ...state, 
         articles: [
             ...state.articles,
             action.article
         ] 
      }

或者，

由于您的initialState（对象）仅具有一个属性articles，因此您也可以将其更改为

const initialState = []

这样，您可以保留其余的reducer代码。然后，您将不得不更改从减速器中的组件访问信息的方式

Answer 2

在减速器中尝试一下：

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

const initialState = {
    articles: []
}

export default ( state = initialState, action ) => {
    switch ( action.type ) {
        case ADD_ARTICLE:
            const currentArticles = [...state.articles];
            currentArticles.push(action.article);
            return {
                ...state,
                articles: currentArticles
            };
        default:
            return state
    }
}

Answer 3

您的问题在于初始状态。您正在尝试将对象散布到数组中。这正是您的错误消息所说的。您应该将其更改为

import {
  ADD_ARTICLE
} from "../constants/action-types";

const initialState = {
  articles: []
}


//OBSERVE initialState.articles instead of initialState
export default (state = initialState.articles, action) => {
  switch (action.type) {
    case ADD_ARTICLE:
      return [...state, action.article] // Problem line
    default:
      return state
  }
}

Redux-散布不可迭代实例的无效尝试

3 个答案: