Базовый CRUD (addUser и deleteUser) с использованием Redux Toolkit, часть 2 – (Full Stack Web Dev...

Продолжение: 12. Создайте переменную для хука useDispatch(). Вы можете написать её перед функцией onSubmit(). Используйте хук useDispatch для отправки действия, передавая в качестве параметра userData. 13. Давайте проверим, успешно ли добавлены новые данные в состояние «users» в хранилище Redux. Введите некоторую информацию и, используя инструменты разработчика Redux в Chrome, проверьте состояние вашего приложения. Щелкните правой кнопкой мыши в браузере — «Просмотреть элемент». Затем перейдите на вкладку Redux. Вы должны увидеть вызванные действия и состояние со значениями. Обратите внимание, что список пользователей в браузере также обновился. 14. Давайте подведём итоги процесса, который мы выполнили до сих пор, используя Redux Toolkit. 15. Затем попробуем реализовать другие функции CRUD. Начнём с удаления. В вашем редукторе: src/Features/UserSlice.js, создайте ещё одну функцию, deleteUser(). Необходимо экспортировать функцию deleteUser. 16. В файле src/Components/Register.js необходимо создать еще одну функцию, handleDelete. Эта функция будет принимать параметр email, который будет отправлен в качестве полезной нагрузки в функцию deleteUser в редукторе. Эту функцию можно написать после функции onSubmit. 17. В файле src/Components/Register.js импортируйте редуктор deleteUser. import { addUser,deleteUser } from "../Features/UserSlice"; 18. В пользовательском интерфейсе файла src/Components/Register.js необходимо добавить кнопку удаления. В этой кнопке мы будем вызывать функцию, обрабатывающую функциональность удаления пользователя. В кнопке создайте обработчик событий, который будет вызывать функцию handleDelete() и передавать в качестве параметра email пользователя. 19. Вы можете еще раз протестировать свой код, проверив его в инструментах разработчика Chrome. Нажмите кнопку удаления и проверьте состояние: удалено ли значение из состояния.