Отправка action в Redux приложении
Теперь у нас есть редьюсер для обновления слайса с реакциями. Сейчас нам необходимо добавить отправку action, которая будет срабатывать при клике пользователя по кнопке с реакцией. Но прежде, чтобы все полностью работало, нам нужно внести пару изменений.
Давайте откроем наше приложение с продуктами,
а в нем файл productsSlice.js. Посмотрите на
определение initialState. Видите? В объектах
нет свойства с реакциями. Давайте это исправим.
Теперь для первого объекта код будет таким.
Изначально счетчики каждой из реакций мы
выставим в 0:
{
id: '1',
title: 'Product1',
desc: 'This is an amazing product',
price: '300',
amount: '30',
reactions: {
good: 0,
soso: 0,
bad: 0,
},
},
Во второй объект для инициализации добавьте свойство
reactions сами. Это же свойство нам необходимо
добавить ниже в код для редьюсера productAdded,
чтобы в новых продуктах тоже был такой функционал.
Давайте сделаем это для его метода prepare:
prepare(title, desc, price, amount, sellerId) {
return {
payload: {
id: nanoid(),
title,
desc,
price,
amount,
seller: sellerId,
reactions: {
good: 0,
soso: 0,
bad: 0,
},
},
}
},
Теперь приступим к отправке action. Откроем
файл UserReactions.jsx, затем импортируем
в него хук useDispatch и reactionClicked:
import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'
В начале кода в теле функции
UserReactions первой строчкой (перед
const userReactions ... ) пропишем:
const dispatch = useDispatch()
И навесим на кнопку реакции отправку
reactionClicked при клике, при этом
у нас будет передаваться id продукта
и название реакции, по которой кликнули:
<button
key={name}
type="button"
className="reaction-button"
onClick={() =>
dispatch(reactionClicked({ productId: product.id, reaction: name }))
}
>
{image} {product.reactions[name]}
</button>
Нам осталось теперь вывести компонент
с реакциями в верстке для наших страничек.
Сделаем это в файле ProductsList.jsx
перед элементом Link:
<UserReactions product={product} />
И точно также перед элементом
Link на страничке продукта
в файле ProductPage.jsx:
<UserReactions product={product} />
Теперь, когда все встало на свои места, мы можем запустить наше приложение. Попробуем покликать на кнопочки с реакциями. Можем добавить новый продукт и также понажимать на них. Теперь, где бы мы не кликали по кнопкам с реакциями, измененные значения будут отображаться для данного продукта на всех страницах. Посмотрите страницу отдельного продукта (на которой вы кликали по реакциям) и страницу с их списком и наоборот, для всех страниц число реакций для конкретного продукта будет одинаковым. Чудеса, да и только...
Этот урок был завершающим в главе по работе с данными в Redux. Мы более углубленно поработали с данными в Redux store и теперь знаем, как добавлять необходимый нам функционал в приложение и использовать данные в React компонентах.
Откройте ваше приложение со студентами.
В файле studensSlice.js объектам для
инициализации добавьте свойство votes
с соответствующими полями. Сделайте
это и для редьюсера studentAdded.
Внутри функции UserVotes в файле
UserVotes.jsx заведите dispatch
для хука useDispatch и сделайте
отправку экшена voteClicked по
клику на кнопки голосования, передайте
ему id студента и название vote,
подобно тому, как показано в уроке.
Выведите кнопочки для голосования
в верстке для компонентов StudentsList
и StudentPage.