In this article I’ll explain how Redux Toolkit simplifies building Redux based apps and combines beautifully with React and TypeScript for an all-round great stack.

Why am I talking About This?

I wanted to evangelize a stack that we’ve enjoyed and had success with here at Instil - React + TypeScript + Redux Toolkit. But I wasn’t sure of what aspects to talk about or who to pitch it to. Looking at The State of JavaScript 2019, I know a lot of you are building applications with React.

Front End Frameworks

I also know that in terms of languages, TypeScript is very popular (although not necessarily with React),.

JavaScript Flavors

Looking at managing data, Redux is also popular but an interesting figure below is the 19.8% who’ve used Redux before, but would not use it again.

Data Layer

Also, looking at Google Trends, the number of searches for Redux dwarf those of Redux Toolkit.

So, in this article I’m focusing on,

• The benefits of decoupling state from view generally
• A quick review of how Redux does this
• Using Redux Toolkit to simplify Redux
• Especially important if you’ve tried plain Redux and found it difficult
• All presented in the context of React and TypeScript

My hope is that by the end of this article you’ll find Redux less intimidating and you’ll be encouraged to try it along with TypeScript for a React project. The sample app I’ve created for the article is a basic web-based calculator,

I’m assuming you have basic working knowledge of React and TypeScript (although perhaps not together or not in anger). If you’d like deeper dives into anything I cover, please Like and leave a comment below.

Decoupling State and UI

React is a framework entirely focused on building views, and it does that very well. The succinct syntax and interleaving of JSX view descriptors with standard programming elements facilitates easy construction of a component-based UI.

export const Buttons = () =>
  <div>
    {buttons.map((row, rowIndex) => (
       <div key={rowIndex} className='row no-gutters'>
         {row.map((button, colIndex) => <Button key={colIndex} value={button}></Button>)}
       </div>
     ))}
  </div>

What it doesn’t do so well is handle state. Coupling state to our views and passing state through large trees of components is fragile and clumsy. Whenever state is owned by components, more business logic will reside in them which compounds the issue.

A much more elegant solution to separate our state and domain logic from our views. Then we can arbitrarily choose which components to bind to — we only bind what is needed, where it is needed.

Decoupled, the state and domain logic are easier to develop. Removing view concerns makes debugging and testing much easier and allows us to focus on simple data transformations. We can model our system as data and descriptions of how our data changes based on events entering the system. This allows us to greatly reduce the cognitive load as we build more complex applications.

The view is also easier to work with as components are smaller and focused on simply rendering a template based on some state. It becomes easy to restructure the UI, splitting or coalescing components. We can move and share where state is utilized within the tree easily as we can arbitrarily bind any state to any part of the view. For example, duplicate a basket total from a component at the bottom of the screen to a toolbar at the top or utilize a busy status across several components.

#typescript #react #redux #javascript #developer