JavaScript Never Breaks a Promise (Part 2) — React/Redux edition
Here’s an easy way to manage your asynchronous Redux actions in your React front-end. Also, some little notes about Redux Thunk as a bonus. If you haven’t read part 1, find it here!
What do we need to do?
In the project we’ll be looking at, we need to check if there was an error in fetching the lobby the user is trying to join. If there is an error, we will redirect the user to the home page. This is a common feature for many applications and can be easily handled with Promises.
We’ll be using Thunk Middleware for Redux to help us!
Here’s the code:
LobbyContainer.js
LobbyActions.js
Step 1: Make your Redux action return a Promise
If you’ve used Redux and Thunk, most of this code should look very familiar. We are returning a function in our redux action that fetches data from our backend API and dispatches action types according to the result of the request.
The important thing here is that we return the Promise returned by our fetch request (line 67). This will give us access to the Promise in our react components.
How does that happen?… Thunk magic!
You can check out the Thunk source code here:
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => (next) => (action) => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}Look at the if statement: If our Redux action is a function, Thunk will call that function instead of simply passing the action onto the next middleware. This means when we call dispatch and pass in our fetchLobby() action, the return value will be the Promise created from our fetch request.
Here’s where that happens:
#2 #1
fetchLobby: (lobbyCode) => dispatch(fetchLobby(lobbyCode))The above line is from our mapDispatchToProps function. Let’s break it down.
#1: This is our fetchLobby action we looked at above. We know this returns function that returns a Promise to fulfill our request to fetch the current lobby.
#2: We pass in our action to dispatch(). Because of Thunk middleware, the function returned from fetchLobby() will be called. This returns a Promise.
Step 2: Use then() to chain onto the Promise
We know the fetchLobby() function stored in our props will now return a Promise. Now, we can do whatever we want with that Promise. In our case, we’re going to chain onto it and check if the fetch request was successful (if a lobby was joined).
Conclusion
Yet again, Promises have come to save us! I hope this short tip will help you implement some awesome features in your applications. You can check out the repository to the project I use as an example here.
Follow for more coding and tech content!