Decembersoft Inc.

Featured Article

How to Type a Keyed Collection in TypeScript

Recent Articles

How to Type a Keyed Collection in TypeScript

I stumbled across a new type definition today -- at least it was new to me -- and I was so excited because I'd been using a less-than-perfect alternative for so long.

Before I go on, I should clarify what I mean by a keyed collection. Different languages call it by different names. In JavaScript/TypeScript it's just an object since object is so versatile. (Okay, technically there is a Map in JavaScript too but it has a different interface). In C# it's called a Dictionary.

Some people might call it a lookup or a map.

Read more...

How to Write Unit Tests for Asynchronous Redux Thunks in Five Easy Steps

How to Write Unit Tests for Asynchronous Redux Thunks in Five Easy Steps

Suppose we have a basic asynchronous login thunk, such as in the code snippet below.

loginThunk.ts

import { Dispatch } from 'redux';import { loginRequest, loginFailure, loginSuccess } from 'actions/sessionActions';import { login } from 'api/api';import { log } from 'util/log';export const loginThunk = (username: string, password: string) => async (dispatch: Dispatch) => {    log.debug(`Login attempt for user ${username}`);    dispatch(loginRequest());    try {        const { userId, sessionId } = await login(username, password);        log.info(`Login succeeded: ${userId} in session ${sessionId}`);        dispatch(loginSuccess({ userId, sessionId }));    }    catch (err) {        log.error(`Login failed: ${err}`);        dispatch(loginFailure(err));    }};

The thunk takes a username and a password; it returns an asynchronous function that takes the Redux store dispatch method. This is the same basic pattern that all redux-thunk thunks have.

This might look intimidating to test because of the indirection and async keyword. But I'll show you how you can easily test the behaviour of thunks like this.

Read more...

Do you need React Hooks?

Do you need React Hooks?

How many times have you put your head down to work on a big project and -- in what feels like the blink of an eye -- several months or even years (ouch) pass by and you realize you haven't come up for air.

It can be difficult to keep current with the latest developments in the JavaScript (and React) ecosystem.

Well... answer me this, busy React developer:

  1. does writing boilerplate code make you afraid of carpal tunnel syndrome?
  2. does your heart skip a beat when you think of stateless functional components?
  3. have you been too busy to check out new React developments lately?

Stop what you're doing right now if you answered 'Yes' to all three questions!

You need React Hooks in your life.

Read more...

Why is this JavaScript so Slow?

Why is this JavaScript so Slow?

There I was... in day two of performance improvements for a tree control in React. (React wasn't the culprit). This particular control does some processing on the incoming data and builds an internal structure and it was that processing that was taking too long.

I had already reduced the runtime from "I don't know... it crashes Chrome" to about 30 seconds. Infinitely better but still not even in the ballpark of acceptible. but at least at that point I could get something -- anything -- out of the Performance profiler in Dev Tools. With the help of the profiler, I had made a few more adjustments and had the runtime down to ~12 - 14 seconds.

Today, however, the profiler led me to something unexpected.

Read more...