Redux - неверная попытка распространить не повторяемый экземпляр

Question

Я пытаюсь изучить Redux (вместе с ReactJS), и когда я пытаюсь добавить заголовок статьи, приложение вылетает и читает следующее:

Недопустимая попытка распространения не повторяемого экземпляра

Поэтому я попытался отладить свой код, выведя его на консоль, и я действительно получил свой идентификатор и заголовок, но когда дело доходит до отправки действия 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 = []

Таким образом, вы можете оставить оставшуюся часть кода вашего редуктора. Затем вам придется изменить способ доступа к информации от вашего редуктора в ваших компонентах

Answer 2

ваша проблема с начальным состоянием. Вы пытаетесь распространить объект в массив. Это именно то, что говорит ваше сообщение об ошибке. Вы должны изменить его на

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

Answer 3

Попробуйте это в вашем редукторе:

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