Одним из моих первых проектов по кодированию было приложение CLI, которое было подключено к API коктейлей. Когда я просматривал Redux, я решил переделать это приложение, но на этот раз в REDUX. Этот небольшой проект был для меня способом лучше понять цикл редукции в меньшем масштабе.
Пользователь будет каким-то образом взаимодействовать с приложением, например, нажимать кнопку. Это вызовет действие, которое отправляется в reducer, который обновляет store, которое содержит состояние , который определяет пользовательский интерфейс (UI).
Моя цель состояла в том, чтобы создать приложение, которое позволяло бы пользователю нажимать кнопку и получать случайное название напитка и соответствующую фотографию. Я начал с создания магазина в файле index.js. Я импортировал Provider, который подключает хранилище и реагирует, а также импортировал createStore и applyMiddleware из redux. Я создал магазин, а затем разместил в нем свое приложение.
В моем файле магазина у меня были файл действий и файл редуктора. В действии у меня были создатели действий и создатели преобразователей. Я создал экшен под названием getCocktail и создатель преобразователя под названием loadCocktail.
В моем коктейльном компоненте я использовал mapDispatchToProps для сопоставления loadCocktail с реквизитами. Когда пользователь нажимает кнопку SURPRISE ME, вызывается loadCocktail, который извлекает случайный коктейль из API. Затем этот ответ jsonified и отправляется редуктору с помощью getCocktail. Тип действия - «GENERATE_COCKTAIL», и редуктор проверяет тип, чтобы увидеть, что он должен делать.
Редуктор получает действие и отправляет его через оператор switch, чтобы узнать, какой регистр соответствует типу. Этот редуктор небольшой, потому что это небольшое приложение, поэтому случай находится прямо там, в строке 8. Редуктор затем обновляет хранилище, которое и содержит состояние. Это новое состояние вызывает повторный рендеринг изменяющихся частей, что меняет то, что видит пользователь!
Приложение развернуто!
