#215 Type-safe state modeling with TypeScript and React Hooks

sponsor

Looking to make your web apps shine? Whether you use React every day, or are looking to build up your web dev skills with the latest modern techniques, at Manning Publications we’re always looking for ways to help developers grow. To help, we’d like to offer you 40% off everything in our entire catalog, including the following selection of books and video courses! Just use the code reactdigest40 when you checkout to save 40%. When you click the Add to Cart buttons below, we’ll enter the coupon code for you automatically.

this week's favorite

Type-safe state modeling with TypeScript and React Hooks

In this post I will illustrate some of the benefits to using typescript strict mode with React Hooks and hope that you will consider using it for your TypeScript+React projects. Seemingly trivial things such as avoiding the Any type and ensuring you always define a return type will allow the type system to catch your mistakes before they can become runtime errors.

Building React Components Using Children Props and Context API

A few examples of how to use React.Children and React.Context together to build easy-to-use interfaces with an approach "just wrap and it works".

Designing automated tests for React

Why write automated tests? Because we want to make sure our expectations hold true over time. Tests are maintenance: Long after your code is written, people will edit it. Tests are also documentation: They record your code’s expected usage and behavior. An ideal test only fails when behavior unintentionally changes.

Asynchronous cat fetching with Redux-Saga

In this article we’ll go over setting up a simple web app that will handle asynchronously fetching data from a public api using redux saga (we’ll use https://thecatapi.com/). By the end of this walk though you should have an understanding of how to handle asynchronous actions using redux-saga. We will build an app that fetches a random cat image.

Testing React functional component using hooks useEffect, useDispatch and useSelector

During mastering react hooks, I wrote a small open-source project that uses only hooks. And for completeness, also the hooks of the react-redux (useDispatch and useSelector) are used instead of the traditional connect, so it really keeps up with the latest trends. Everything was fine before my trying to write unit tests using the classic jest+enzyme set.

newsletters

Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.