Olio Apps
Published in

Olio Apps

Reduce Redux Boilerplate with Sitka

Introducing a new framework for React/Redux/Redux Saga

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

A simple counter application

The traditional way

  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

Implementing the app using Sitka

What’s happening under the hood

  • 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

Upgrading existing applications

Olio Apps is using Sitka

--

--

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