Adding Redux Functionalities to the App

We will start by designing the state structure and actions. When we have both, we will add reducers to tie everything together.

There’s a lot of work ahead of us, so let’s try to break it down into smaller chunks:

1. We will start by looking at the user state and how we could manage a user’s logged-in and logged-out state with a global state in Redux.

2. We will then do that same walkthrough for liked images in our app.

3. When we have successfully set up those two pieces of the global state, we will look at how we can combine them and use them in our app.

4. We will then create some actions to handle events in the app.

5. Once we have the state and the actions, we’ll take a brief look at how data can be fetched in an app with Redux.

6. Finally, we will be ready to get rid of the ReactJS context we used before for managing the state of our app.

User login state walkthrough

Let’s start with the user state. We will create a new file called store.js where we will store our initial state slices. We will add this JavaScript object to that file: