One of my first coding projects ever was a CLI app that was connected to a cocktails API. As I reviewed Redux, I decided to remake that app, but this time, in REDUX. This small project was a way for me to better understand the redux cycle on a smaller scale.
A user will interact with the app in some way, like clicking a button. This will trigger an action, which is sent to the reducer, which updates the store, which contains the state, which defines the user interface(UI).
My goal was to create an app that allowed the user to click a button, and be given a random drink name and the associated photo. I began by creating the store in the index.js file. I imported Provider, which connects store and react, and imported createStore and applyMiddleware from redux. I created a store, then wrapped my App in that store.
In my store file, I had an action file and a reducer file. In action, I had my action creators and my thunk creators. I created an action called getCocktail and a thunk creator called loadCocktail.
In my cocktail component, I used mapDispatchToProps to map loadCocktail to props. When a user clicks the SURPRISE ME button, loadCocktail is invoked and it fetches a random cocktail from the API. This response is then jsonified and dispatched to the reducer using getCocktail. The type of the action is “GENERATE_COCKTAIL”, and the reducer checks the type to see what it should do.
The reducer receives an action and sends it through the switch statement to see which case matches the type. This reducer is small because this is a small app, so the case is right there on line 8. The reducer then updates the store, which is what contains state. This new state causes a re-render of the portions that change, which changes what the user sees!
The app is deployed!
