Подготовка данных для объекта action в Redux
Недавно мы говорили с вами о том, что
функция createSlice ожидает один
аргумент при создании action.payload.
С одной стороны это упрощает ее использование,
с другой же может потребовать дополнительных
движений для подготовки содержимого
объекта action.
Давайте откроем наше приложение с
продуктами, а в нем файл NewProductForm.jsx.
Обратите внимание на следующую строчку кода:
dispatch(productAdded({
id: nanoid(), name, desc, price, amount
}))
Здесь мы собираем payload объект
прямо в React компоненте и передаем его в
экшен productAdded. А что если нам
придется отправлять такой же экшен из
нескольких компонентов или логика для
сборки окажется сложной? По идее нашему
компоненту должно быть все равно как
выглядит объект в payload для данного
action. К тому же нас не устраивает
постоянное дублирование кода.
Эти проблемы нам снова может помочь
решить наш знаменитый createSlice,
поскольку при написании редьюсера он
позволяет нам использовать callback-функцию
prepare, в которой можно писать различную
логику, генерировать случайные числа и прочее. В
таком случае значение для поля редьюсера может
быть представлено в виде следующего объекта:
{reducer, prepare}
Давайте откроем наш файл productsSlice.js
и изменим код для редьюсера productAdded.
Теперь этот кусочек кода:
productAdded(state, action) {
state.push(action.payload)
},
Мы поменяем на следующий, в котором
функция reducer будет заниматься
обновлением стейта в store, а prepare -
возвращать объект payload со
сгенерированным id и другими нашими
данными:
productAdded: {
reducer(state, action) {
state.push(action.payload)
},
prepare(name, desc, price, amount) {
return {
payload: {
id: nanoid(),
name,
desc,
price,
amount,
},
}
},
},
Так как теперь мы будем генерировать id здесь, а не в компоненте, давайте добавим nanoid в импорт:
import { createSlice, nanoid } from '@reduxjs/toolkit'
Напоследок внесем изменения в
NewProductForm.jsx. Вместо
строчки:
dispatch(productAdded({
id: nanoid(), name, desc, price, amount
}))
У нас будет такая, в которой мы просто
через запятую передадим необходимые нам
данные (не забудьте в этом файле убрать
nanoid из импорта):
dispatch(productAdded(name, desc, price, amount))
Запустим приложение, затем создадим новый продукт и убедимся, что мы ничего не поломали.
Откройте ваше приложение со студентами.
В файле StudentsSlice.js перепишите
ваш редьюсер studentAdded таким образом,
чтобы он был в виде объекта {reducer, prepare},
как показано в уроке.
Внесите соответствующие изменения в
файл NewStudentForm.jsx, как показано
в уроке. Запустите приложение и убедитесь,
что все работает как и прежде.