What’s good guys?

Yesterday was pretty dam awesome. We worked on building a todo app just based off of the front-end technologies, React and Redux. We got pretty far and I definitely learned a lot. I’m starting the realize that the homework, readings and videos should mostly be skimmed just to get a general and superficial overview. Majority of my learning is done during projects, which is why it’s crucial to have an absolutely SOLID pair who can facilitate learning. I had that kind of pair yesterday, and given that it’s for a React and Redux project, I’m infinitely grateful for my pair. That said, today we’ll be diving into middleware, and connecting the front-end to the back-end. I’m excited!

Today, I’m going to be doing something a little bit different, I hope you won’t mind. This also means that this post might be a little late. I’m going to be giving you my interpretation of the React and Redux relationship and model, in hopes that it not only solidifies in my mind, but it helps anyone out there to understand the concept as well. I’ll be doing my best to explain Redux mostly with the following keywords and phrases:

• Store
• Actions
  • Plain Old JavaScript Object (POJO)
  • Passes “Type” and optional “Payload”
• Reducer
  • Receives State and Action
  • Object Immutability
  • Changing State
• State
• Containers
• Presentational Components

I found an excellent gif, seen below, that animates the process extremely well. Let’s start with some extremely general definitions. I’m hoping to keep things simple.

• View – The view represents everything you see within a browser. It’s the front facing interface that a user sees and interacts with. We’ll be focusing on React as the View generator.
• Action – The action is the POJO that is sent to the reducer via a function called dispatch(action). In the action POJO, there’s a hash-key called “type” that specifies the type of action that needs to be taken. Also included in the action POJO is any additional information needed to perform the action.
• Reducer – The reducer is where the action is applied, and the state gets updated. The reducer creates a new state that reflects the necessary changes, if any, and returns that new state, without ever changing the original state. Object immutability can be facilitated by the function Object.freeze(). If there is no changes necessary, the original state is returned. The reducer is a pure function.
• Store – The store is the  central element of the Redux architecture and contains the state of the application.

When a user interacts with a component from within the view (a browser for example), such as clicking a link, typing in an input field, clicking a button, or even scrolling, an event object is created. This event object is then converted into an action POJO, which contains the type of action and the optional payload, and then sent to the reducer.

Within the reducer, the current state, as well as the action in the previous paragraph, is received and if necessary, a new state is returned. If the action is not applicable for whatever reason, the old state is returned. The state returned from the reducer is then sent to the View, where a re-render is triggered.

Within the view, the state and dispatch functions are mapped to the presentational components via mapStateToProps(), mapDispatchToProps() and connect().  This occurs within the container. The connect() function takes the mapped props, and connects them to their respective components so that the React components are able to trigger the state changes whenever there’s user interaction that requires a state change.

That’s pretty much for the EXTREMELY basic overview of the React-Redux cycle. There are a couple more tidbits of information that I’ve omitted due to time constraints as well as complexity, which would result in a longer post than I would like at the moment. Some keywords to look out for include:

• getState()
• subscribe(callback)
• <Provider />

Sorry this post is late, but I did want to put a little bit more work into it. If you guys like these types of posts a little bit more, I can do my best to create more of them, but I can’t guarantee it due to my hectic schedule. Do drop a comment to let me know what you think!

Thanks for reading! I’ll talk to you guys tomorrow.