React… AND Redux
First! Let’s get an intro to React. What is React?
React is a Javascript library for building interfaces.
OK? Cool, but now, what does that mean?
Well, React makes building interactive UIs more easy and efficient. This is due to declarative programming — stating what the desired task or outcome is instead of specifying an exact procedure, or describing that procedure. Programming that involves specifying or describing the procedure of an outcome is imperative programming. Here is a good analogy:
Declarative Programming
You go to a bakery, because you’re hungry. You say to the baker in charge, “I’m hungry. Bake me a strawberry cheesecake”. PERIOD. POINT. BLANK. That’s it. Nothing else necessary to do or say, because the baker already knows what to do about the desired outcome.
Imperative Programming
In this bakery you would say to the baker in charge, “I’m hungry. *insert ALL steps for baking strawberry cheesecake here*. Can you imagine having to do that every time you wanted fresh made cheesecake? Having to describe that procedure every time would be a pain.
Hence, React is declarative. Thank you, React. For more on the wonders of oh-so declarative React → enter.
So, in React we have no interaction with the DOM, thanks to…
More specifically, due to the change in state — data within a component that can be changed. Every time the state of a component is changed, React knows to render the DOM and display the change in the interface. Just as React has states, it also has props — values passed down from a parent component to child component. Props allow for more dynamic and reusable components.
Redux…Duhn DUHN
As a React app grows larger, state and props can be spread across multiple components. I don’t know about you, but that would be a bit tedious for me to keep track of which component is handling and sharing what. This is where Redux comes in handy:
Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test…With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store.
— Neo Ighodaro, Why use Redux? A tutorial with examples
While I was learning Redux, I would hear about how “hard” or “annoying” Redux is to work with. I mean it is very involved and detailed. However, in my experience with programming so far, I have found Redux to be a bit cookie cutter. It involves more muscle memory than anything. I have to say that it is useful in the organization department. It was satisfying to know that all my state, all my data were stored in one place.
Redux stores all of our data in our application in a Javascript object. This object is completely separate from our components. In order for our components to be able to access the state, our components must connect to the store, the global store.
Provider and createStore
Let’s take a look at createStore and Provider. Above, I am importing createStore into my index.js file; I’ve seen cases where a separate file is created specifically for the store. It is all about preferences. The createStore API literally creates the store that will contain the state I will want my components to eventually have access to. I then stored createStore and all the parameters listed in a variable called store. Now store would need to be passed in as a prop to ALL my components, right? How else would my components be able to access the store? But I don’t want to do that. So in comes Provider; in order to avoid passing store as a prop. What happens is that Provider will wrap around the top-level component, in this case, my App component. My App component will be the only one where store will be passed in. So ultimately, Provider is what gives all the components access to the Redux store — via connect.
connect
To simply put it, connect connects a React component to the Redux store.
Above, I imported connect into one of my components. At the bottom, I am exporting the connected component class to be accessible to other components when necessary. The function connect gives me access to mapStateToProps(look up mapDispatchToProps as well), that is passed in as a parameter. I then define mapStateToProps as a function with state as a parameter. This function, literally maps parts of state to props to be used in the component. Here I am accessing fetched data (via a reducer) that I would later map through. I am storing state.daycareReducer.daycares into sunnyDaycare in order to use it as this.props.sunnyDaycare. I would then be able to pass this prop down to other components when necessary.
