Great we have our authentication setup, now we will first setup redux which will be our global state that we will access through out the application.

But before that I would recommend you try the previous step where we setup Auth0.

Here is the redux documentation.

Here is a couple of article explaining the difference between redux, and passing state from parent to child and a simple example implementing redux.

Let setup our directories, We will have another directory in our src folder since redux is a state management and has nothing to do with the backend. We will create a redux folder, and within that folder we will create store.js and reducer.js.

Great let’s setup redux, the two modules we will be using is redux, and react redux. Redux module is responsible for setting up your store and reducer. Then react-redux is for connecting react component to redux. Before we connect our component to redux, we will first setup our redux reducer then our store.

Go to your reducer.js file in your redux folder, and create a initialState object which will the default global state, if state is not manipulated it will return it’s default state. For now we will just have a user property for when we retrieve the user data from auth0.

We will define our action type which will be constants or variables that are uppercase. These will be used with the reducer. with a switch statement, and each action should return a action type. We will have LOGIN, and LOGOUT for when the user logs in and when a user logs out.

Now lets define our reducer which will contain a switch statement, which will return a new state based on the action’s type. We will define our reducer as a default export, so there will be no need to name it. By default it will return the state, else if it’s action type is LOGIN or LOGOUT manipulate the state accordingly.

For login we set the action.payload to user from the action, and in the logout we give user it’s default state.

When we define our actions we will return an object that will have to contain a type(which will be the action type) and if you need one a payload. First let’s define our login action that will login the user based on the userInfo argument pass into action that will be returned as the payload.

Then we will do logout in which we do not a payload since we just simply logging out the user from state.

Now we will now define the store. Go to your store.js file, and import a named export called createStore from redux which will be responsible for creating the store. Then import your reducer from your reducer.js file.

Since we are gonna default export our store we will export the store using createStore the reducer as first argument and optionally import the redux devtools. Here is the redux devtools github.

Now our redux is setup let now configure our components.

We will go to index.js file in our src folder and import the named export Provider from react-redux. Also our store from our store.js file in our redux folder.

Then we will wrap our BrowserRouter with the store.It connect to the store via the store prop in within the parathesis of the ReactDOM.render.

Now let’s use react-redux named export connect which will is a method to connect all of our components to redux.

First lets connect our app component in our App.js using the connect method.

Then we will conditionally set the user state in redux or set to null using our login and logout actions. They are two ways to dispatch actions in redux one is via mapDispatchToProps which will map our actions to props or just use the dispatch prop, and invoking our action as callback to the dispatch. But first import our actions.

Now in our componentDidMount we will check if the user session is defined, if it is we will login our user if it isn’t we will log them out of redux therefore setting it null.

Then we will just delete the export the component connected with redux, since we are using react-router-dom in order to have access we need wrap our connect withRouter in order access the props from react-router-dom.

Lets start with the Navbar which will need access to the user state to conditionally the render the login/logout link. With the logout link have the users picture right next to it.

Great our navbar is connected, next we are gonna use mapStateToProps. Which will map the specified or all of the state from the reducer and map it to props of the component.

In this case we need the user state so we can access it with state.user.

Now we have access in to our user prop when we login, lets delete our export default before our component. Then export default our component connected to redux, and also use with router to have access to the props of react-router-dom.

Now our component is connected.

Let’s define our logout function . Which will destroy the session and logout the user from the reducer’s state. We will do a and past an empty since we don’t need any data. We are just gonna destroy the session. Then we will refresh the browser to update the navbar to have login instead of logout, using this.props.history.go().

Great let’s finish it off by conditionally render our login and logout link. We will use a ternary statement so if the user contains data display the user image and logout else display login.

Our render method.

Also we updated our styles in our Nav.css.

That’s it now it should our user image and the logout link when they login.

Image for post
Image for post

Great Now we will setup cloudinary and setup our admin, so the admin can create products.

Here is my redux for reference:

Happy Coding!

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