Overcoming React-Redux

Photo by Tudor Baciu on Unsplash

You know, the flow of React and Redux can be a bit uncomfortable. It’s kinda like going on a rollercoaster for the first time — you can’t predict when it's gonna turn left or right, you’re not prepared for the big drop, and a part of doesn’t really know when the ride is gonna end. There’s the nervous excitement, the rush of adrenaline, and sometimes there’s the rare and unfortunate puking(I imagine someone outside of this allegorical metaphor literally puking on their laptop from working through the loopholes of React-Redux😂).

But to answer your question that you didn't ask — yes, it's hard. Very.

But I’ve come to understand that all things are hard when you first start them. No one wakes up one morning knowing exactly how the rollercoaster of life is going to pan out neither does anyone wake up one morning understanding the idiosyncrasies of the React store, thunk, and whatever other knick-knacks useful to create a dynamic web application. I certainly didn’t; however, I grabbed a cup of coffee, got on the rollercoaster, and strapped on that seatbelt and boy was it UNCOMFORTABLE. But enough of this awesome introduction. Here’s what I learned…

I created a simple web application using React-Redux that was modeled after an online art gallery where users can log in, view artistic pieces, and comment/rate. Below is a Home Component where I rendered the list of pieces that users and will be our primary source of code for the sake of understanding.

Home Component

Key terms to identify are componentDidMount, connect, mapStateToProps, and mapDispatchToProps.

ComponentDidMount is executed after the first render only on the client-side. This is where AJAX requests and DOM or state updates should occur. You can think of it as it growing a mouth that says, “upon instantiation of the Component to the DOM, I will execute this function!” Specifically, the getPieces() function which directly invokes the getPieces action is what is executed once the component renders on the DOM.

Connect or connect() function connects a React component to a Redux store and specifically the Home component is connected to the redux store given this function. Connect takes in optional parameters: mapStateToProps and mapDispatchToProps which are most commonly used.

mapStatetoProps is a function that assigns values in the state to properties you characterize in this item. The great thing about code is that it is linear: request-response. When we diagnose the code, the mapStateToProps function takes in state as a property which is the returned value from the reducer. I am telling my component that I will be assigning this data as a property called “displayPieces”. The object returned in the mapStateToProps is the piece of state that the component will use as props.

mapDispatchToProps is a function that helps components to fire an action event. Ordinarily, components should only be concerned with rendering HTML at the end of the day. However, mapDispatchToProps equips components to be able to call actions that will in turn work with the data firsthand. That little guy, according to our example, is called getPieces which was mentioned above. This is the action that tells our component upon rendering to the DOM to do an action: make a fetch request to the api backend to get all the pieces which is in turn mapped to the DOM.

This rollercoaster is the behing the scenes loop of how React and Redux work seamlessly together to create dynamic applications that manage state and produce an interactive UI. This was totally challenging for me and writing this blog actually proved itself to be fun and edifying! Keep hacking away and soon you’ll be able to tackle this ride without a paper bag. *wink*

web developer