GreyCrew
@GreyCrew
Full-stack developer

Как лучше всего реализовать CRUD — DOM на ReactJS?

Недавно начал изучать реакт. По, уже ставшей традицией, изучению JS библиотек\фреймворков, есть желание реализовать простую CRUD операцию, по отношению к DOM элементу, к примеру элементу списка.
Пробороздив интернет нашел несколько уже готовых полноценных приложений, но хочется прям самый базовый пример, который можно сразу повторить и расширить.
Естественно, раз решил использовать реакт, то хочется, чтоб элементы динамически изменялись для всех людей на сайте, т.е., если один человек создал элемент списка, то другой человек это тоже увидит.

Вопрос1 - есть ли где, подходящий пример?
Вопрос2 - одного react.js мне хватит, или нужно использовать для этого фреймворк?
  • Вопрос задан
  • 1267 просмотров
Решения вопроса 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
по поводу вопроса 2: вам будет необходимо взять еще что-то. Например, можно использовать веб сокеты, чтобы рассылать всем подписчикам события: элемент_создан / удален и т.д. Без такой "рассылки" по подписчикам (подключенным клиентам) не получится сделать, разве что будет какой-то костыль с таймером (не надо так).

по поводу вопроса 1, за неимением хорошего простого примера под рукой, предлагаю сделать по шагам, если получится - уверяю, с "расширением" пойдет гораздо лучше:

Например есть страница с номерами телефонов и именем.

На этой странице у вас компонент PhonesAndNames в момент componentDidMount делаете xhr вызов и получает список всех телефонов и номеров. Например, это GET запрос на ваш сервер: GET /api/phones

Полученные данные вы кладете в state и в рендере компонента у вас строится таблица по данным из state компонента. Следовательно, как только у вас xhr запрос завершится, данные окажутся в state, случится ре-рендер и все будет хорошо. Для полного счастья, можно добавить переменную isLoading, например, и ставить ей true в начале выполнения запроса, и false в момент получения ответа. В рендере компонента, в зависимости от значения isLoading - рисовать прелоадер. Конечно, isLoading тоже будет жить в state.

Далее, при наведении на строку - у вас, к примеру рисуется "крестик". По клику на крестик - производится запрос на сервер, например: DELETE /api/phones/айди. Внутри компонента PhonesAndNames это будет просто onClick на элементе крестик и функция, которая опять же отправляет xhr запрос. Когда будет получен ответ, вы должны поиском найти id удаленного элемента из вашего списка в state и вернуть список элементов. Изменился state - случился ререндер - все в порядке.

Так же с добавлением. Вам достаточно поставить пару input'ов + кнопку "добавить". Опять обработчик на onClick (или на onSubmit, если сделаете это как форму) - опять xhr запрос (POST /api/phones), опять на успешный ответ операция со списком телефонов и имен в state, а именно: банально добавление в конец или в начало нового элемента.

Остался только update. С ним тоже самое. В простейшем примере, чтобы не заморачиваться, все ваши телефоны и имена могут быть в таблице внутри тэга input и в конце строки, там же где крестик - иконка "обновить".
---
Получается, если вы будете использовать web-сокеты, то вам нужно будет настроить свой сервер так, чтобы в момент успешного ответа на все вышеизложенные методы бродкастилось (от broadcast, т.е. рассылать) какое-то событие, на которое ваши клиенты умеют реагировать.
---

Чтобы все это в процессе "расширения" и "усложнения" не превратилось в трудноподдерживаемую кашу, рекомендую использовать любую из библиотек для "управления состоянияем приложения", так сказать. Мне очень нравится redux.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы