Redux-toolkit helps us to significantly reduce boilerplate in the redux layer of our applications. If you’re not familiar with redux-toolkit you can reference official documentation.

Let create a simple todo reducer:

One downside of this code, is that it’s not possible to reuse types of actions and action payloads setTodoStatus and removeTodo. For example if you need to reuse action type in a middleware handler (e.g. redux-saga). One simple solution would be to extract those as separate types:

However, this once again increases boilerplate. …

Typescript 4.1 introduced an incredibly powerful feature called Template Literal Types. It allows developers to write better typing for strings, so typescript can check them to match certain template:

In the example above a variable of type Percent can accept a string value, that starts with a numeric string and terminates with % .

Another, even (in my opinion) more important use case is possibility to map keys of an object.

Let get a step back to explain what happens in detail. Suppose Getters would have the following definition:

K in keyof T means that interface transformed…

Usually when someone creates a redux app, the root reducer gets configured within combineReducers utility.

Suppose we have a simple state, that with fieldsuser, location and also it should track failures related to fetch of user or location. Also location failures must be displayed as warnings, and user related as errors. Those errors should be displayed as stack:

Re-rendering components is a very handy pattern whenever you need to display form data, or values returned from the backend. However sometimes that’s not enough for your application. You’d like your application to quickly react to scroll events, maybe mouse movement, timers, or any other source that emits events once at frame.

Unfortunately re-rendering pattern updating component props / state will not work here. Cause even just shallow comparison / jsx generation on each frame may outcome with noticeable overhead, that will not allow your app to perform smoothly.

To improve the performance, you need to manipulate your dom elements…

ES6 brought a really cool feature to javascript ecosystem, which is arrow functions.

const foo = (x) => x * x;

Arrow function is great, cause it can be easily used to create a closure, for example for react event handler. Let look at following simple app:

// ItemRenderer.jsimport React from 'react';

const ItemRenderer = ({ onClick, value }) => (
<div onClick={onClick}>

export default ItemRenderer;
// Group.jsimport React from 'react';
import ItemRenderer from './ItemRenderer';
const Group = ({ time, items, log }) => (

Mikhail Boutylin

React / typescript entusiast

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