Redux Basics

Photo by Lautaro Andreani on Unsplash

Why Redux?

React is an open-source Javascript library that utilizes components to build user interfaces for single-page applications. As you may know, the components in React can be classified into two different categories: functional and class. Functional components are stateless and are mostly used to display information to the user typically through props given by a parent component. Class components are used to typically manage state which is where our lovely friend, redux will come into play! Just a side note: redux can also be used in functional components to display the state to the user.

How To Implement Redux

A more detailed instructions for installation and use is documented here, however, I will be breaking it down for you!

  • Using create react app:
    - npx create-react-app my-app-name — template redux
  • An existing react app:
    - npm install react-redux
  • We would need to import a Provider component from react-redux and wrap our App component within here.
    - We need the Provider component because it makes the redux store (global state) available to our application.
  • We would also need to import createStore from redux in order to create the global state for the application.

How To Give Application Access To Store

Wrapping our App component within the Provider component typically in index.js and then we can access the redux store by connecting from react-redux. In components, in order to have access to the functions provided by react-redux, we must import it at the top of our component. Then, through connect() from react-redux, we have access to the store through mapStateToProps and then the state will then be able to be accessed by the component through props. If we needed to update the store, we would need to use mapDispatchToProps given by the react-redux library. Through this, it would allow us to dispatch an action to our reducer and the payload of the passed action will determine how the reducer will update the store. dispatch() is also given by the react-redux library that allows us to send an action that contains some “instructions” to our reducer that determines how we will update our state. To get more information on how these two functions work, feel free to read this amazing blog post I found here! Since redux is relatively new at this point for you, I will not be going into thunk middleware (which is provided by installing the redux-thunk library) just yet but do note that this middleware is needed to allow you to appropriately make asynchronous calls to your backend.

Your Turn!

Now that you have some of the basic knowledge of redux and how to implement it into your own react application, give it a try! In the next couple of blog posts, I will be going more in depth about how to utilize redux with a backend, but for now, just practice the flow of mapDispatchToProps -> dispatch(action) -> reducer -> updated store. Once you have a hang of this, understanding how to effectively fetch data to and from your backend will be a lot easier to grasp. For now, happy coding and please feel free to message me with any questions!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store