Creating a Web App with React and Redux: Day 2 & 3 Execution

Alright, Day 1 Planning in the books. Now to get completely out of my comfort zone and start building this app! I say "get completely out of my comfort zone" because just 4 days ago, Redux was introduced to me. Observing my instructor when she codes and participating in building sections of an application in class is a great start, but actually doing it myself is something completely different.

"The best way of learning about anything is by doing." -Richard Branson

Here's a quick overview of Redux. This visual really helps me think through the flow of data and how to build out the app.

Setup Directories, Components, Actions, Reducers

I had a great start with the help of my instructor. She reviewed an example application, which gave me a great start for setting up my routes, components, reducers and actions. As I get further into building out the app, I'm positive I'll add an additional component. This is a great start for me. Here is my index.js file.

Component 1: Here's a look at my first component that I built. I built others, but I just want to display a glimpse of one of them. This component will render the daily workout and allow you to log your repetitions after completing each set. My goal here was to get the button functional, to render and have the number of repetition sent to the global state (where the data is stored). Once I have this working without any bugs, then I can duplicate it for any number of workout sets that I need.

Actions for Component 1: Below are the two actions that I created. These are just simple functions that increase or decrease a counter when called or in this case, the button is clicked. As in the flow of the diagram, these values are sent to the reducer.

Reducer for all components: The reducer is a pure function that takes the previous state and an action, and returns the next state. That's a proper definition, but here's how the reducer works in my mind: the action notifies the reducer that it has some new data and needs to update the global state. The reducer then goes to the store (global state), makes a copy of the global state via a spread operator and adds the action's new data to the state. Not technical, but that's how I vision it in my mind. Here' s my reducer for the increase and decrease actions.

Time to keep going and to keep building. I got this!