Categories: react, redux, software architecture

Understanding Redux within a React app

Reading Time: 3 minutes
Image result for react and redux

“Redux is a predictable state container for JavaScript apps.” as stated at redux whereas React is a “A JavaScript library for building user interfaces” created by Facebook. Redux is framework agnostic meaning that it can be implemented into a variety of different JavaScript frameworks such as Angular or Vue.js.

Should we use Redux within a React App? – Most probably yes as many different containers within your app may need access to the same data which comes from an API or simply from a parsed CSV. What is a container anyway? A container is an evolved form of a React Component that knows about and is connected to Redux.

Here is a diagram created explaining the flow:

React/Redux Flow

Lets put this diagram into some context.

Imagine an application which displays a list of users. What happens when?

  1. Our container loads up and calls a fetch users action (as we need the users)
  2. The fetch users action performs an API call to a users service.
  3. Once the API call is competed, the action is dispatched along with a type and a payload (returned data) across all of the reducers
  4. Each reducer analyses the type of action which has just happened. If one of the reducers contains the type used for the fetch users action, it will return the actions payload which contains the updated data (the users list as opposed to having an empty array)
  5. The component receives within the mapStateToProps an updated fetch users action payload.
  6. If the container returns updated users data from this mapStateToProps function then it will be re-rendered 🙂

This method above explains how a list of users is loaded upon app launch or route change, but how can we manually trigger an action that does not dispatch an action upon container launch. The scenario we will take is updating one of these users on an edit user route (/users:id)

  • Normally we have the user already loaded in the state as a dispatch event has already occurred on loading the user on the page within the container
  • Local container state (props) have already been mapped to the form elements within the JSX ex. First name, last name, phone number
  1. The admin updates some user information ex. address which locally updates the containers state.
  2. Admin clicks save which has an onClick handler assigned
  3. The function calls a user update action that takes the local container state and performs a PUT request to the API
  4. The user update action is dispatched after a successful update on the server
  5. All reducers analyse the action and an updated state is returned by the reducer concerned
  6. Containers receive the updated application state. If the updated application state changes the local container state, then the render method is called to display the updated data. 
  • An example of a container that would re-render would be a notification container that displays “User X has successfully been updated”

Two scenarios have been explained here. 

  1. On container launch (Loading a list of users)
  2. Manual action trigger (Updating a user)

If you have any comments, then feel free to leave one at the end of this article. If you want to contact me personally then feel free by using my contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *