Why I love Redux with React (and so should you!)

Last month an article was posted saying that Dan Abramov had announced a new feature coming to React called “Future-Fetcher” which would essentially make Redux obsolete. This made me very sad because I love Redux! I even built an app as an example for my students without using Redux because I thought it was going to be deprecated! 🤦 Thankfully, the article has been debunked and Redux lives on (although other changes to React are on the horizon).

Also, important lesson to not believe everything you read on the internet — except this article. You can believe me 😇

Now knowing that Redux is still out there and I can keep using it, I thought I should share why I love it! I’ve been working with a non-profit coding school C4Q and many of my students are apprehensive to use Redux because it is confusing. And many people share this view, however when you get over the initial learning curve I promise you will love Redux too!

No need to pass props

Arguably the best thing about using Redux with React is you no longer need to worry about passing props all over your app. In another app I built with my friend James Miele, we did not use Redux and had to constantly worry about how to get props from parent to child to sibling. This ‘prop drilling’ was manageable since our app was small, but we eventually reached a ceiling of scalability.

Enter Redux. The next app I created used Redux and I discovered that I no longer had to worry about passing props anymore! If I wanted to access anything from my Redux state, all I needed to do was call upon the mapStateToProps function and identify which parts of the state I needed for this particular component.

So, in my app I had information about television shows, episodes, which a user saved, and which a user watched. This is a lot of information to be passing around as props. Now all I need to do is say:

function mapStateToProps(state) {  
  return {    
    myLineup: state.episode.myLineup,    
    showEpisodes: state.episode.showEpisodes
  }
}

And I will have access to the episodes a user has saved (myLineup) and also all the episodes associated with a specific show (showEpisodes) without having to worry about passing props from one component to the next.

You can access and manipulate state anywhere

Similarly, there are functions that I needed to use in some components that were sometimes not connected by the same parent. Without Redux, this would require passing props all the way up to the highest level and then back down. This means my components are bulky and carrying around unnecessary information. Thankfully, Redux allows you to access all those handy functions that manipulate state wherever you’d like!

By using mapDispatchToProps you have access to all of the wonderful actions and reducers that are in your Redux store and thus can manipulate the state.

I have a PremieresContainer in the app and it isn’t directly connected to any of the others — it’s kind of doing it’s own thing showing users TV shows that premiere that week. Without Redux I would have to connect the PremieresContainer with a parent component in order to allow users to actually add the shows I’m suggesting and it would have been quite annoying.

With Redux, it’s super simple and all I need to do is a few lines of code to connect to my state.

function mapDispatchToProps(dispatch) {  
  return {    
    addSuggestedShow: (id) => {      
      dispatch(addSuggestedShow(id))    
    },    
    addEpisode: (episode) => {      
      dispatch(addEpisode(episode))    
    },
    fetchMyLineup: (id) => {      
      dispatch(fetchMyLineup(id))    
    },    
    fetchPremieres: () => {      
      dispatch(fetchPremieres())    
    }  
  }
}

With this, I can now allow a user to add a show, add an episode, and also fetch the TV show premieres and the user’s TV show lineup!! All from within this component which is otherwise not connected to the other components 💯

Your app can be as large as you want

My favorite thing about Redux is that it allows me to add as many features to my app as I want. The premieres and trending pages of my app wouldn’t be possible if not for Redux. They would have been very bulky components and slowed down performance, as well as included a lot of prop drilling to get all the information I needed.

With Redux, I decided to add these pages and in order to make it possible I just needed to create some new actions and reducers in my Redux store.

By adding the following code, I could add a premieres component to my app and also include that information anywhere I wanted within the app!

Premiere actions:

//ACTIONS
export function fetchPremieres() {
   return function (dispatch) {
     let d = moment(new Date()).startOf(‘week’).format(“YYYY-MM-DD”)
     const body = JSON.stringify({date: d})
     return fetch(`${baseURL}/premieres`, {
       method: “POST”,
       headers: {
         ‘Accept’: ‘application/json’,
         ‘Content-Type’: ‘application/json’,
         ‘Authorization’: `Bearer ${token}`
       },
       ‘body’: body
     })
     .then(res => res.json())
     .then((json) => {
       dispatch(fetchedPremieres(json))
     })
   }
}
export function fetchedPremieres(premieres) {  
  return {    
    type: "FETCHED_PREMIERES",    
    payload: premieres  
  }
}

Now I can dispatch(fetchPremieres()) anywhere in the app and get the premieres for this week ✅

I hope this article has swayed those of you out there who think Redux sucks. For me personally, I love Redux and am so excited that it’s here to stay!

If you enjoyed the article, I’d love for you to let me know by giving a clap! 👏 You can also see my code on GitHub or learn more about me professionally on LinkedIn. I’m currently seeking employment as a developer so if you think I’d make a great addition to your team, please feel free to reach out 👍