Реактивный компонент не обновляется при изменениях карты (структуры данных) в хранилище состояний приставок

Question

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

ПРИМЕЧАНИЕ. Я видел, что мы можем использовать модуль mobX для прослушивания изменений в карте (или других структурах данных, кроме массива), но я не хочу использовать другой модуль или около того для достижения этой цели.

Мой магазин Redux

const initialState = {
    myNotes = new Map();
}

Мой редуктор

case CREATE_NEW_NOTE:
      const { noteAdded, success } = action.payload;
      let newOwnerNotes = state.myNotes;

      newOwnerNotes.set(noteAdded.note_id, noteAdded);

      if (success) {
        return {
          ...state,
          myNotes: newOwnerNotes
        };
      } else {
        return {
          ...state
        };
      }
case DELETE_NOTE:
      const noteIdToDelete = action.payload.note_id;
      const { success } = action.payload;
      let newState = Object.assign({}, state);

      if (success) {
        newState.myNotes.delete(noteIdToDelete);
        return {
          ...newState
        };
      } else {
        return {
          ...state
        };
      }

My React Component

import React from "react";
import { connect } from "react-redux";

// Components
import Notes from "../notes/Notes";
import Heading from "./Heading";

class Owner extends React.Component {
  render() {
    const { myNotes } = this.props;
    debugger;
    return (
      <div className="notes-owner">
        <div className="notes-owner-header">
          <Heading owner={true} />
        </div>
        <div className="notes-owner-content">
          {[...myNotes].map(([key, note]) => {
            return (
              <Notes note={note} owner={true} key={note.note_id}>
                {note.title}
              </Notes>
            );
          })}
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    myNotes: state.notes.myNotes
  };
};

export default connect(
  mapStateToProps,
  {}
)(Owner);

Answer 1

Вы не должны использовать Map, по крайней мере, не так.Вы мутируете государством.Посмотрите на эту строку:

  let newOwnerNotes = state.myNotes;

  newOwnerNotes.set(noteAdded.note_id, noteAdded);

Вы просто ссылаетесь на один и тот же объект.Попробуйте так:

  let newOwnerNotes = new Map(state.myNotes);

  newOwnerNotes.set(noteAdded.note_id, noteAdded);

Вы должны всегда помнить, что массивы, объекты, карты - все это reference types, посмотрите на следующий фрагмент:

const arr = [1,2,3,4,5]
const copy = arr
const realCopy = [...arr]
console.log(copy, realCopy) //[1,2,3,4,5],[1,2,3,4,5]
console.log(copy === arr) //true
console.log(realCopy === arr) //false

Когда вы просто назначаете какconst copy = arr вы не создаете другой массив, вы просто ссылаетесь на тот же объект, но во второй ситуации (с использованием оператора распространения) вы создаете другой массив, который содержит распространение всех элементов из arr.Подробнее о неизменяемости в JS см. Здесь.

Когда вы делаете const newNotes = new Map(state.myNotes), вы создаете другой объект, теперь вы делаете свои изменения и в конце концов: return {...state, myNotes: newOwnerNotes};