добавление нескольких элементов в магазин Redux

Question

Я пытаюсь написать приложение todo note, я выбрал redux для хранения списка заметок, чтобы каждый раз, когда пользователь добавляет новую заметку, она добавлялась в магазин. Я хочу, чтобы хранилище было массивом, чтобы я мог после mapStateToProps и отобразить карту в хранилище, чтобы вывести список заметок.

Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я добавляю новую заметку, она переопределяет старую, а хранилище не хранит список массивов всех заметок.

Моя форма:

    import React ,{ useState } from "react";
    import './AddNoteForm.scss';
    import { Button } from 'react-bootstrap';
    import { setNoteData } from '../../actions';
    import { connect } from 'react-redux';


    function AddNoteForm (props) {

        const [titleData, setTitleData] = useState('');
        const [noteData, setNewNoteData] = useState('');

        const { handleClose, setNoteData } = props;

//EDITED
    const handleSubmit = (e) => {
        e.preventDefault();

        setNoteData({title: titleData, note: noteData});
        handleClose();
    } 

        return (
            <div className="AddNoteForm">
                <form onSubmit={handleSubmit} >
                    <div className="AddNoteForm__title">
                        <label htmlFor="title">Title</label>
                        <input type="text" name="title" value={titleData} onChange={(e) => setTitleData(e.target.value) } />
                    </div>
                    <div className="AddNoteForm__note">
                        <label htmlFor="note">Note</label>
                        <textarea type="text" name="note" value={noteData} onChange={(e) => setNewNoteData(e.target.value)} />
                    </div>
                    <Button className="AddNoteForm__button" variant="primary" type="submit">
                        Add
                    </Button>
                </form>
            </div>
        );
    }


    const mapDispatchToProps = () => {
        return {
            setNoteData,
        }
    }

    export default connect(null, mapDispatchToProps())(AddNoteForm);

Мое действие:

export const SET_NOTE = 'SET_NOTE';
export const GET_NOTES = 'GET_NOTES';

export function setNoteData (note) {
    debugger;
    return {
        type: SET_NOTE,
        note
    }
}

//EDITED
my Reducer:

import { SET_NOTE } from '../actions';

const setNoteReducer = (state=[], action) => {
    switch (action.type) {
        case SET_NOTE:
            return state.concat([action.note]);
        default:
            return state    
    }
}

экспорт по умолчанию setNoteReducer; отслеживание консоли Redux:

Как видите, я дважды вызывал действие SET_NOTE, которое запускается в моей форме в handleSubmit, но предыдущее состояние переопределяется новым состоянием, которое они не сохраняют. Кроме того, я новичок, чтобы реагировать на крючки и не уверен, что я использую его правильно, но когда я отлаживаю, кажется, что он делает свою работу.

Answer 1

1. Вы должны добавить новую полученную заметку в массив заметок в редукторе, который не находится в вашем компоненте.
2. Ваш редуктор должен выглядеть примерно так:

function noteReducer(state, action){
   switch(action.type){
      case "SET_NOTE":
        return state.concat([action.note]);
      default:
        return state;
   }
}

Answer 2

Изменить переключатель следующим образом

switch (action.type) {
    case SET_NOTE:
        let new_state = state.push(action.note)
        return Object.assign(state, newState)
    default:
        return state    
}