I have already written a piece on my final project yet feel compelled to write a little more. React with Redux was a very tough concept for me to get my hands around. I think the reason is more that you should understand React before you do something with Redux. It would be best if you comprehended Javascript before learning React. While looking over what I have done, I can’t help but think this section should have been divided into two separate projects.
In my final project for the learn.co curriculum, I need to make a react app that uses redux. I find this interesting because it is hard enough to learn React, then you have to throw in another helper? Nothing like wondering if you are doing the react framework correctly in the first place, then have to include another library to increase complexity. First, I will try in layman’s terms to explain redux. Then I want to point out when you need to use redux. From there, I will explain why redux would be a good option. Let’s get started…
The official documentation explains redux as a predictable state container for Javascript apps. That, though, isn’t really in layman’s terms. Further along, it states that it helps you write applications that behave consistently. That is a little better. React is set up, so that parent components pass down props to child components. That is generally just fine with most apps. What happens if you have an extensive app? Communication between two components that don’t have a parent-child relationship is discouraged.
What does that mean? Let’s take the family concept. Suppose we have an extensive family with eight brothers and sisters. Those eight families all have four children. Most would agree that it could be a large APP! Well, how do the cousins communicate? Through the parents, but that is fraught with errors and complexity. That is where Redux comes in! Redux is like a family messenger that allows all members to communicate easily one to one.
So when do we use redux? Great question, and let me give you a few answers.
The first reason to use redux is when you need to use the state globally. The convention of redux is to store the entire state of the application in a single global object. An example of this is when a state change happens in component A it is then relayed to the Redux store, and other components ( D and E) that subscribe to that store get notified of this change.
The next reason to use Redux is when you are passing too many props. In many cases, you may be giving props to a higher-level component using only a couple of those props. It is easier to refactor your props through redux and then send what is needed.
Finally, if you require the state to be mapped between components, an example of this may be the session state after the app loads. The user can be shared between components easily on each page.
So what are the benefits of using redux in the examples above?
This project is meant to make sure you understand how to create an API as the first step and then start your journey into Javascript. My initial reactions were that it was going to be challenging but not over the top. I found out that I would be wrong!! The project ended up being challenging and extremely interesting. In this post, I will expound a little on why.
My third project for Flatiron School of Web Development is to do a ruby on rails project. The key isn’t to do any random rails project, though. We have criteria we must meet that shows we are learning development. I set out to complete my ruby on rails Flatiron project with a very detailed plan for an e-commerce site selling Bonsai. Not only could you get the Bonsai, but you could also review them. Lets set out the Flatiron criteria.
It is interesting that when we have an open slate, how much harder it is to create something. When allowed to develop anything you want, it seems you want to organize everything and nothing. How does one think of ideas without overwhelming one with ideas? That is the curse of not having a definitive direction. That was the curse of my second project in Sinatra.