Quick Code
Published in

Quick Code

Reduce Redux Boilerplate with Sitka

Introducing a new framework for React/Redux/Redux Saga

By Aron Racho & Frank Meza — originally posted February 15th, 2019

Evergreen trees in an open field. Photo: Diverse Graphics via Pexels

Sitka is a small but powerful framework for state management. It organizes your application into modules, each managing a logical area of state. It builds on top of Redux and Redux Saga, giving you all the benefits of those tools without the boilerplate.

Let’s examine a simple counter application, contrasting the differences between a traditional Redux / Redux Saga implementation and a Sitka implementation.

A simple counter application

For the purposes of illustration, we’ll work with a simple counter app built using TypeScript, whose state exists in a Redux store, and uses Redux Saga to coordinate its logic.

In simple applications, it may be enough to change state by calling an action directly consumed by a Redux reducer. However, in larger apps, Sagas offer a useful mechanism for triggering compound operations around a single logical action such as “increment counter”. For example, the increment action might require permissions checks, logging, and even asynchronous access to a secondary data store before finally calling a reducer to change state.

The counter app discussed here is a simplified model of a much larger application, similar to others we’ve created at Olio Apps.

The traditional way

Building the counter app using TypeScript, Redux, and Redux Saga will require:

  1. the counter state in Redux
  2. an interface for the increment action creator
  3. an action creator that uses the interface
  4. a listener for this action in the Sagas index, routing to a Saga
  5. a selector to get the current counter state from Redux
  6. a Saga, which handles the action’s payload as well as any other application side-effects, and setting a new value in Redux state via reducer, using a second Redux action creator
  7. an interface for this reducer-facing action creator
  8. an action for the reducer-facing action creator
  9. a reducer listening for the value-setting action creator
  10. registration of the reducer with the root reducer

Below we have a fully realized implementation of these components:

TypeScript, Redux and Redux-Saga are great to use together. You gain all the advantages of a strongly-typed codebase, Redux state management, and straightforward control flow of both synchronous and asynchronous operations.

But as you can see from above, an obvious downside of this stack is that typical usage requires a lot of boilerplate! That is where Sitka comes in handy.

Implementing the app using Sitka

Sitka dramatically cuts down the amount of boilerplate. All the code that is needed to accomplish the same counter application above can be written using Sitka like this:

A full counter application can be found here on Github.

A moduleName and defaultState are set within the class, and a single generator function *handleCounter is defined, which simply increments the counter by 1.

The public and private keywords are used to show which class methods are callable from outside of the class itself. For more about this feature of TypeScript, see their handbook about classes. In this case, getCounter is marked private so that only CounterModule has access to its own state.

This is much less code than the first example. This makes it more maintainable and easier to reason about. Overall, this leaves you with a cleaner codebase.

In your presentational component, this is how you might call *handleIncrement:

The handleIncrement generator defined in your module is wrapped in an Action that is created under the hood, because its name starts with handle.

What’s happening under the hood

Sitka spares you from writing boilerplate by autogenerating code. It generates:

  • An action wrapping each generator function
  • A reducer backing the setState method
  • A section of the redux state tree, defined by the sitka class attribute moduleName - in this case counter.

When should you use Sitka

We recommend using Sitka if you intend to build a larger application using typescript and redux. Sitka keeps your code strongly typed and organized, while reducing the boilerplate burden of that redux and typescript can add out of the box. Less typing = faster development time.

Upgrading existing applications

Though you can build your application from the ground up using Sitka, it’s also designed to be incrementally added to an existing Redux application. See an example of adding Sitka into a project, and an example of usage using React-Redux’s connect function to connect your component to a Sitka-powered Redux store.

Olio Apps is using Sitka

We are using Sitka in live projects, and it’s delightful to work with. We get to take advantage of all the benefits of a strongly-typed codebase, while also enjoying writing a small fraction of the code we needed before using Sitka. We at Olio Apps hope you try out Sitka to manage state in your next project, or even to implement a new feature in your existing project.

Olio Apps creates software for the web, mobile, and other platforms. To read more articles like this, subscribe to our newsletter.

Originally published at www.olioapps.com.

--

--

--

Find the best tutorials and courses for the web, mobile, chatbot, AR/VR development, database management, data science, web design and cryptocurrency. Practice in JavaScript, Java, Python, R, Android, Swift, Objective-C, React, Node Js, Ember, C++, SQL & more.

Recommended from Medium

The Right Usage of Aliases in Webpack and TypeScript

Value of “this” in JavaScript… — Part 1

JavaScript Code

An Intro to React Testing Library

50 Difficult TypeScript Interview Questions

Using PowerShell to Manage Windows Audio Volume Level

How to Offset Your NFT Project Carbon Emissions with Aerial

The Beginner’s Guide to Lodash

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
Olio Apps

Olio Apps

A software company located in Portland, Oregon

More from Medium

Exploring more about reducers, pure functions,side-effects ,useEffect() ,async calls and context..!

Tips to build a Todo app with react, redux-saga, typescript and react-bootstrap — 1

Todo app with react + typescript + react-saga

useEffect and “u”: Turning competition into cooperation.

The difference between get, find, query (React Testing Library).