Learning Redux: When all hope is lost...
Tags: reactnative, redux, javascript
Published: 2021-08-30 18:15:40

Redux, "a predictable state container for JS apps", as described by the creators themselves, can sometimes feel like a blackbox for those new to web development.

I recently had this experience myself during my journey as a Flatiron student. With the idea of state still a fuzzy, foreign concept in my head, even the purpose of Redux seemed obscure.

As with many things in life, I find the best way to approach problems is by breaking them down into bite-sized pieces.

First, let's begin with how React Native deals with state. Individual components, whether functional or class-based can all have their own state. This is incredibly helpful, allowing the developer to save and/or manipulate pertinent information without persisting it to a database with costly calls to an external API. However, as the application grows it can become difficult, if not impossible to keep track of what is being saved where. One might think that a good solution would be to have a single instance of state, stored in a top-level component like App, then passing this down to components as needed; but this quickly becomes unwieldy when a child of child of child of a child and so on, needs that information. Here's where Redux comes in to save the day.

Redux offers a global store for your state that is accessible from any component in your app.

Before we begin, here is a short list of Redux vocabulary that you'll need to successfully navigate docs, StackOverflow posts, etc.

state
action
reducer
dispatch (dispatching function)
action creator
store

Explanations can be found here: https://redux.js.org/understanding/thinking-in-redux/glossary

I've found the best way to view the Redux 'flow', is in a linear fashion. I won't get too technical in this post, but rather focus on the conceptual flow of data. First, think about how you would get the desired info into the Redux store, then pinpoint where the data lives and how it makes its way to the desired component.

Let's take an example: You want your Redux store to have a currentUser key that stores relevant information such as the current user's email address. You will need to display this info on the app's navbar when a user is logged in.

In order to get this data into the redux store, first, you'll need to add in the necessary boilerplate to create the store as well as connect it to your top-level component. You'll find a great example of this from the Redux docs: https://redux.js.org/usage/configuring-your-store. I would also highly recommend the Redux Chrome extension here: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en. This helps by providing a visual representation of the store.

Here is a basic Redux flow:

1. User logs in and is authenticated, data is sent to your React/Redux app.

2. You then take the response from your backend (an authenticated user's data that you want to add to your global state (Redux store) and use it to dispatch an action.

3. This data is passed to an action creator whose job is to create and format the correct action. Action creators always return an object (the action itself).

4. Within the action creator, you use a special Redux-provided function called dispatch to send this newly-created action to your reducer.

5. The reducer (just a plain JS function) then takes this object, reads its type and decides what to do. The reducer then returns a JS object that will replace the current state based on its type (i.e. type: "AUTHENTICATE_USER" or type: "UPDATE_COUNTER", etc.).

6. Success! You've now successfully updated global state in your application. You're almost there; you just need to get that new info to your component of choice.

7. Within the desired component, you make use of the connect function, imported from the React-Redux npm package.
https://react-redux.js.org/api/connect

8. Then using the function 'mapStateToProps', which does exactly what its name implies, you can take the current global state and access it from the props of the component.

9. And that's it!

Redux is a powerful tool whose use and implication are often obscured by fancy technical jargon, but make no mistake, its job is simple! And with a little bit of time and practice you'll be using it in no time!

Here's is great video that helped me during my journey: https://www.youtube.com/watch?v=CVpUuw9XSjY