Managing State in React and React Native using ReSub

Nader Dabit
React Native Training
5 min readMay 1, 2017

--

ReSub is a library released by Microsoft + Open Source for writing React components that automatically manages subscriptions to data sources simply by accessing them.

It suggests the use of TypeScript. From their docs:

It is fine to use ReSub without TypeScript, but without access to TypeScript’s method decorators, stores and components cannot leverage autosubscriptions, and as such, lose a lot of their value.

ReSub would fall in the same categories as Redux or MobX.

In my opinion, the closest thing I would compare this to is MobX. The ReSub library automatically manage subscriptions to data sources simply by accessing them, and has been really nice to work with in my experimentation so far, reducing boilerplate and offering an easy to understand API.

In this post, I will walk through how to set up a new React Native project, and implement ReSub as a way to manage the state. We will do so by creating a very basic todo app.

The final code for this example is located here, and is in the resub-medium-examplebranch.

To get started, we first will create a new React Native project, set up TypeScript, add and configure tsconfig.json, and install the necessary React and React Native types as well as the ReSub dependency.

  1. Create the project then change into the directory
react-native init rnresub

--

--

Nader Dabit
React Native Training

Full Stack Product Engineer, Author, Teacher, Director of Developer Relations at Avara