Managing State in React and React Native using ReSub

Nader Dabit
May 1, 2017 · 5 min read

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

2. Install TypeScript (in this tutorial, we are using version 2.3.2)

3. Install types

4. Install ReSub

5. Create tsconfig.json

In tsconfig.json add the following config:

In the above config, we are setting a few things up such as our root directory (rootDir, in our app src) and build output directory (outDir, in our app build).

The output directory (build) will be created for us when the typescript is compiled.

That means we now need to go ahead and create the src directory, which is where we will be writing all of our TypeScript.

Next, add a build script to your package.json in scripts:

With this script, we can call npm run build from our command line, and it will kick off the typescript compiler. The -w flag will tell the compiler to watch the files for any changes, and when changes happen, it will recompile the code automatically.

In the project root, create the src directory with two files: an entry point (App.tsx)and a store(TodoStore.tsx). The store will be our data store.

Now that our files and dependencies are set up, let’s update the index.ios.js or file to use the code that will be compiled by TypeScript.

In index.ios.js or, update the file to the following:

Now we can go about creating our store.

In TodosStore.tsx, create the following class, which we will walk through step by step:

  1. At the top of the file, we import StoreBase, which is the base class that ReSub gives us, and what we will extend to create our store, as well as two decorators that will keep the data in sync (autoSubscribeWithKey and autoSubscribeStore).
  2. At the top of the class, we create two variables: a _todos array and a _textInputValue string.
  3. The updateTextInputValue method will take in a value from a text input, and then update the _textInputValue with the value passed into the method.
    After we do this, we call this.trigger(TriggerKeys.InputTextKey) which will trigger all subscriptions that are subscribed using the autoSubscribeWithKey(TriggerKeys.InputTextKey) decorator, updating components that are using this data with the updated store data.
    trigger() is available as a method of StoreBase, which we extended to create our store.
  4. addTodo will first check to make sure there is a value to be added, and if not will return without doing anything.
    Otherwise, we then take the existing _textInputValue as well as the existing todos array, and then create a new array, passing in the new todo as the last item in the array.
    Once the new array is created, we update the _textInputValue to be an empty string, and again call this.trigger()
  5. getTodos returns the list of _todos. We add the autoSubscribeWithKey(TriggerKeys.TodosChangedKey) decorator to make sure that whenever the data changes, any component using this data will be updated.
  6. getTextInputValue does the same thing that getTodos does, but for the _textInputValue value

Now that the store is complete, let’s create the last file we will be using, App.tsx.

There is quite a bit going on here, and I’ll walk through it next, but it’s really a pretty basic implementation, with a few things that are specific to ReSub, most notably I think is that we are extending the ComponentBase class of ReSub vs the Component class of React.

  1. We import the dependencies we will need for the file
  2. We create a State interface, and in it we declare a todos array and a todo string
  3. We extend the ComponentBase class of Resub, which gives us not only the lifecycle methods that we are used to in React, but also a few other useful methods, notably _buildState which is what we will be using to tie our component state with the store state. Check out the linked buildState docs to learn more about _buildState, but it basically is a method is called to rebuild the module’s state when the store is updated.
  4. The rest of this component is a couple of basic methods updating the store todos array, the store _textInputValue, and adding some styling.

Now in the terminal, run typescript:

Next, run the React Native app in your emulator, and we should see a functioning todo app!

Again, the code for this example is located here.

My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AppSync and Amplify, and the founder of React Native Training.

If you like React and React Native, checkout out our podcast — React Native Radio on

Also, check out my book, React Native in Action now available from Manning Publications

If you enjoyed this article, please recommend and share it! Thanks for your time

React Native Training

Stories and tutorials for developers interested in React…

Nader Dabit

Written by

Developer Advocate at AWS Mobile — Specializing in Teaching and Building React & React Native —

React Native Training

Stories and tutorials for developers interested in React Native

Nader Dabit

Written by

Developer Advocate at AWS Mobile — Specializing in Teaching and Building React & React Native —

React Native Training

Stories and tutorials for developers interested in React Native

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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