Photo by Marcelo Leal on Unsplash

Sometimes API requests we make don’t get any response from the server. We create a loading state to show the user, and then it never goes away. Now we’re stuck in a state indicating that the app is waiting for something...

In such cases, it might be better to reject that request and show the user that something went wrong. One way to solve this is to create a promise with a timeout.

So what do I mean with “a promise with a timeout”? …


Photo by Christopher Gower on Unsplash

When React applications grow, the state can become hard to manage. With Redux, the state is easier to manage, and there is also an excellent dev tool called ReduxDevTools. In this post, I’ll try to explain how to set up a React application with Redux.

Dependencies

I create this project with create-react-app, and then I added some dependencies for redux. So to get started, you should create a project using create-react-app. I prefer to use npx, but you can do as you like.

npx create-react-app redux-cracd redux-cranpm install redux react-redux redux-thunk uuid --save

File structure

This is an overview of how…


Photo by Samuel Zeller on Unsplash

Redux is a well know state management library often used in React applications. When starting with Redux, there are a lot of names and concepts thrown around. This post aims to demystify those names and concepts to help you learn Redux faster.

General concepts

Let’s start by looking at some general concepts.

Application state vs. Component state

State is often divided into two groups. Application state and Component state. Redux should handle the application state. So what’s the difference between these types of states?

Component state

The component state is the state a component uses to work as expected. A dropdown menu might have a variable called isExpanded. The…


Photo by frank mckenna on Unsplash

React was built to solve some of the complexities in modern frontend development by improving the way we build UI components. A core principle of this is building components for reusability.

One way to make components more reusable is to make them have a single responsibility. Components that fetch the data that they are going to build a UI with have two responsibilities, fetch data and present data. To avoid this, a solution is to make container components.

A container component is a component that renders another component, it is a kind of a higher-order component. The container component has…


Photo by Pankaj Patel on Unsplash

Programmers use their jargon and that’s good because it makes communication less ambiguous. But some phrases might sound more complex than they are. When I first heard of closures, first-class functions, and higher-order functions I thought that they would be complex concepts, and I was afraid to look stupid if I asked what they were. It turned out that they’re not as complex as I built them up to be, and I will use this article to explain what they are.

First-Class Function

First-class functions are a lot easier than you might expect, and JavaScript has first-class functions. This means that functions…


GraphQL is a way to fetch data with the ambition to solve the problems by using REST APIs in modern application development. From the front end point of view, it is like sending a query for the data you want to receive instead of asking for predefined entities.

What is GraphQL trying to solve?

The purpose of GraphQL is to be able to query for the data that you need. As an example let us look at a contemporary application setup, the front end is usually detached from the back end which can lead to intense request cycles. …


Photo by Kai Pilger on Unsplash

In ES2017 Async/Await was introduced. Which is a cleaner way of handling promises. The code will look more like synchronous code and it can be easier to follow the execution flow.

To follow along you need to have some knowledge about promises, I wrote a post about that here. Otherwise, let’s keep going.

Promises are a way to handle asynchronous communication, it looks nice and many of the HTTP Request libraries of today are promise based. Async/Await uses promises behind the scenes but the syntax has a bit of finesse to it.

In the examples, I’ll use the https://jsonplaceholder.typicode.com/ API…


Handling asynchronous communication is a very common thing in web development. One of the ways of doing this is through promises.

To understand promises we have to start with asynchronous communication, which is nonblocking communication it is the opposite of synchronous communication.

Let’s pretend we’re making a phone call, the sequence of actions would be to make the call wait for the other person to pick up and then the communication would start. If we need to make another phone call we would not do that before the first call was finished. This is synchronous communication.

But if we would…

Viking Jonsson

Front end developer

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