Checking all options with one or many Redux action?

Imagine the situation of a UI with many checkboxes and an option to select them all. In the perspective that the feature of checking all checkboxes is new, would it be a good idea to have the “select all” button to just loop the checkbox action with each id one by one? The short answer […]

React Dropdown Mounting Optimization from 400ms to 2ms

I always have the Chrome’s developer tool open without exception when developing websites. I am having this habit since the first FireBug extension was released from FireFox a very while ago! Once in a while, I collect performance and look at the result. It keeps me on my toes if regression occurs or merely to […]

Handling React form with Redux-Form and TypeScript

Most applications require using some kind of form to collect user inputs. So far, I’ve avoided relying on a third-party library when using React and Redux. When we think about it, it’s not hard to send the data to the Redux store, performing some validation and rendering again to React. This loop is done hundred […]

A simple React and Redux Architecture

There are a lot of different ways to have a system built around React and Redux. This is mainly because both frameworks are not opinionated on how developers leverage them. In this article, I’ll present a simple architecture that uses React and Redux. The idea is to not complicate the life cycle by avoiding an […]

TypeScript with a generic React Component that use generic property

React is fairly straightforward for simple scenario and TypeScript integrates very well with the JSX syntax (called TSX for TypeScript). However, like many systems, when we push on the limit a little, it starts to be less obvious. One case is the one that you want to have a component generic. Imagine that you want […]

How to get React Router Route Segment

Using React-Router library is almost the defacto in the industry right now. It handles many scenarios around how to route and handle URL on the client side. One specific case is that you may have some custom parameter that you want to extract to show specific information. For example, if you have a user and […]

Optimizing Redux Store Mapping

Redux is a simple data flow that many React developers are using. Recently, Redux introduced the option to be able to shim a callback function when the Redux store send the notification that its state has changed. This is great because it allows us to perform logic between the store and to connected components. This […]

How to Have A Hook Before a Redux Store Notify its Subscriber with TypeScript

This is a long title but it says all. Redux is well known to function calling other functions with the capability of getting into the pipeline easily. For example, it’s a defined pattern to create a middleware if you want to inject some code in the pipeline between the time an action is dispatched and […]

Redux Middleware: Calling next or dispatch?

Redux offers many ways to handle the flow of information in your system. One tool in the toolbox is using Middleware. I already discussed how we can leverage Middleware to do the heavy lifting instead of action creators. In this article, we will look at one question that you may stumble which is should I […]

React and Redux without ActionCreator

Before digging into the main topic of not using action creator, let me establish some contexts. There is nothing white or black and this is even truer in regards to anything touching JavaScript these days. The official documentation of Redux talks about action creator but is very unopinionated about how the full flow should me. […]