Как исправить местоположение дублирующихся данных при использовании как объекта-редукса, так и объекта класса

Question

Я пытаюсь реорганизовать функцию редуктора моего redux, и я намерен переместить функцию обработки данных в отдельный класс.Это должно выглядеть так:

reducer.js

const initialState = {
  notes: []
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_NOTES':
      let newState = Note.addNew(action.note);
      return newState;
    ...
  }
}

note.js

class Note {
  notes = [];

  function addNew(note) {
    return [...this.notes, note];
  }
}

Моя проблема в том, что notes хранится в нескольких местах:1011 * параметр функции редуктора и notes внутри класса Note.Один из способов исправить это - удалить notes из класса и изменить функцию addNew на addNew(notes, newNote), но таким образом я должен передать данные каждой манипулирующей функции.

Есть ли лучшие решения для этого?

Answer 1

Вы в значительной степени здесь, но есть только одна проблема. Позвольте мне кратко рассказать о том, как работает Redux.

На языке редуксов ваша функция addNew называется Action. Вам не нужно передавать состояние, т. Е. Все ваши заметки в редуктор. Редуктор автоматически получит его. Ниже описан способ отправки действия.

Вот как работает редукс.

1. Вы отправляете действие (событие обновления) в состояние из компонента, в котором вы работаете.

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

    const sendNote = note => {
        store.dispatch(addNew(note);
    };

2. Теперь, когда вы отправили действие. Ваше действие поймает это конкретное действие и направит его редукторам. Теперь действие всегда должно иметь форму

   { тип: 'ADD_NOTE', полезная нагрузка: примечание } Обратите внимание на тип и полезную нагрузку. Теперь это действие для добавления заметки. Теперь это действие будет отправлено всем редукторам. Для справки здесь Строка 15.

3. Наконец, редуктор ловит ваше действие и автоматически получает состояние. Помните, вам нужно только передать initialState в качестве значения по умолчанию. Это всегда получает полное состояние.

Теперь ваш редуктор изменится, как показано ниже:

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_NOTES':
      return state.notes.push(action.payload);
  }
}

Это обновит ваше состояние, для которого фигура имеет вид:

Государство {примечания: []}

Я настоятельно рекомендую вам прочитать эту длинную и углубленную статью , в которой Ohans поможет вам разработать приложение для реального мира с использованием Redux.