Blog

Field notes, primers, and case-tested patterns from Rangle on agentic systems, design systems, frontend, and AI strategy.

Showing 1–12 of 19 posts

Pavel Ivanov

Nov 25, 2022

How to create a reusable custom React Hook for Redux dispatch action calls

React Hooks were first introduced in React 16.8 at React Conf 2018. Since then, they have become very popular for several reasons. Firstly, with Hooks, you can extract stateful logic from a component so it can be independently tested and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy, making it easy to share. Secondly, you can use Hooks to split components into smaller functions (e.g. setting up a subscription, fetching data, etc.). Lastly, Hooks let you use more of React's features without classes.

Frontend Development

Ricardo Mattiazzi Baumgartner

Apr 27, 2021

How React and Redux brought back MVC and everyone loved it

Are we still talking about MVC? Isn't it dead already, with UML and waterfall? We want to soar through the cloud, create lambdas, use modern stacks, integrate with top-of-the-line libraries, the latest and the greatest — not something from a dust-covered book written a long time ago, in a galaxy far, far away. I hear you, young Padawan, but give me a few minutes of your time, and I'll explain how those two intersect, and how you can sit on the shoulders of giants.

Frontend Development

Adam Sullovey

Mar 15, 2019

Thinking in nested streams with RxJS

In my first project at Rangle, I jumped into a codebase that used redux observable, a combination of RxJS and Redux for managing state and side effects like calls to our backend & 3rd party APIs. Although I was new to RxJS, I could relate many of its operators like map and take to standard JS array functions, or functions included in the Ramda library. Other RxJS operators were like nothing I had seen before, such as flatMap, and switchMap.

Frontend Development

Evan Schultz

Jan 25, 2019

Simplifying React Forms with Hooks

Forms, like death and taxes, are one of the unavoidable aspects of web development. From Login Forms, Contact Pages, to heavy form-centric applications - at some point, you will need to wire up an input field to your application state. Working with forms in React can require a bit of boilerplate, and while there are libraries like Formik, Redux Form or React Redux Form can help make things easier, they can be overkill for many situations.

Frontend Development

Daniel Figueiredo Caetano

Nov 30, 2018

Redux Typescripted

For fans of Redux and Typescript like myself, the release of Redux 4 was a highly anticipated event, and it did not disappoint. The new enhanced typing definitions help to provide a nice and strongly typed Redux setup, minimizing the number of runtime errors. This article will give you a different perspective on the many ways you can structure the app.

Frontend Development

Herman Starikov

Nov 13, 2018

Improve your component test coverage with this one weird trick

When it comes to unit testing, business logic is considered the most valuable area of your code to test because if there is an error, heads will roll 😵. This was apparent on a React Native project I recently worked on that had plenty of unit tests for the Redux part of the app - reducers, sagas, and selectors, but the overall code coverage was not great 🤔. There was a lot of presentation logic and components that were not covered. So when I joined, the goal was to bring the overall coverage up by unit testing 👨🏼‍💻the remaining code.

Frontend Development

Shaun Lloyd

Oct 12, 2018

Fun With Higher Order Reducers

How you manage the state of your application is important, and libraries such as redux and ngrx have been widely adopted in the JavaScript community for this task. Even though state management has come a long way, most people will quickly notice common patterns being repeated in their reducers and start to cry foul over the boilerplate that seems to be required. This was something I noticed too, but I started to adopt a pattern of Higher Order Reducers to help abstract away the repetition.

Frontend Development

David Barreto, Magali Bautista-Lee

Apr 09, 2018

Redux Form Validation with ngrx-forms

Many enterprise applications use complex forms with even more complex validation rules. Out of the box, Angular offers a solution to handle forms including its validation. But even though the solution is feature rich, it can't cover every possible use case. What if we want to count how many fields are invalid in any given section of our application? What if we want to validate a field depending on the value of another component's field?

Frontend Development

Kyle Truong

Oct 17, 2017

Unit Testing React, Redux, Selectors, and Epics

Components can be tested with snapshot testing. Tools like Jest (often combined with Enzyme) that offer this functionality take a 'snapshot' of what your component renders--everything from divs, attributes, classNames, props, and state--and saves it to a file, kind of like this:

Frontend Development

Kyle Truong

Oct 06, 2017

Creating Forms with Redux: Part II

In Creating Forms with Redux Part I, we hooked up our forms to Redux, learned about the reduxForm HOC and Field component, styled our forms, and made a custom input component. In this section, we continue creating reusable components for the most common form widgets, learn how to do field-level validation, and dive a bit deeper into the built-in action creators and selectors to help us create a more dynamic form.

Frontend Development

Kyle Truong

Oct 04, 2017

Creating Forms with Redux: Part I

There are few things less appealing than forms but they're still one of the most direct ways for a user to dump a hunk of data into your server. To make the process of filling a form as painless as possible, one needs a good form system that handles common concerns such as:

Frontend Development

Seth Davenport

Jul 13, 2017

Angular Components and the Redux Store: Now You Can Have Your Cake and Eat it Too!

Over the last year, two architectural ideas have risen to the surface of JavaScript web app development: Component-Oriented Architecture (COA) and Redux state management. Component-Oriented Architecture is one of the main tenets in both React and Angular: it encourages developers to break down the UI into a graph of self-contained, re-usable UI components. On the other hand, Redux is a functional-reactive approach to state management where the UI is at any time a derivation of a global, immutable store.

Frontend Development

Blog

How to create a reusable custom React Hook for Redux dispatch action calls