Дублирование переменной в ReactJs?

Question

[Junior Bee]

Добрый день! Сделал поиск заметок на ReactJs. Суть такова, что данные хранятся в localstorage, фильтровать его не получается потому что оно сразу сохраняет отфильтрованный массив и удаляет элементы, поэтому я дублирую массив с данными и работаю с ним, но таким образом мне нужно обновлять массив при каждой изменении состояния(есть удаление и добавление элемента ). Скажите пожалуйста как правильно такое сделать, обойти дублирования переменной с массивом при каждой смене состояния? Возможно есть компонент предназначен для этого, не могу разобраться ..
Заранее большое спасибо)

Answer 1

[Антон]

Если вы новичек в React, и этими данными пользуется только один компнонент, то redux и прочие я думаю лишним. Советую сделать так: родитель, который является хранилищем для данных, и записывает/читает localStorage. И в нем компонент, которому даются данные, а он уже разбирается с фильтрацией.

<ChildComponent notes={ this.state.notes } onAddNote={ this.addNote } />

componentWillUpdate(props) {
  this.filterNotes(props.notes);
}

Comments

[Junior Bee]

Данными не один компонент пользуется. Если не трудно гляньте https://github.com/chilander1/react-tutorial-search.git

[Антон]

Junior Bee: лень разбираться, извините. Повторюсь: должен быть родительский компонент, у который занимается работой с даннными, и передает данные, и коллбеки (удаление, изменение, добавление) через props дочернему компоненту. А дочерний в отображении фильтрует данные. И еще: советую добавить .idea в .gitignore, и освоить ES6.

[Junior Bee]

Ладно, и на этом спасибо) На счет .idea знаю.

Answer 2

[Антон Измайлов]

Используйте датасторы, рекомендую посмотреть на редакс

Comments

[Junior Bee]

Редакс решит данную проблему? Я только начинаю учить React, постепенно все учу, боюсь что-то пропустить. Или лучше сразу браться за редакс / флакс?

[Антон Измайлов]

Junior Bee: должен, есть модуль для редакса который автоматически состояние записывает в локалстороейдж, посмотирте в ту сторону. Реакт - это только view, для данных нужно использовать хранилища