Managing State in React and React Native using ReSub

Managing state in #ReactJS and React Native using ReSub:

  • 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.
  • tsxNow that our files and dependencies are set up, let’s update the index.ios.js or index.android.js file to use the code that will be compiled by TypeScript.In index.ios.js or index.android.js, update the file to the following:import React, { Component } from ‘react’import { AppRegistry} from ‘react-native’import App from () = App)Now we can go about creating our store.In TodosStore.tsx, create the following class, which we will walk through step by step: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).
  • After we do this, we call which will trigger all subscriptions that are subscribed using the 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.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()getTodos returns the list of _todos.
  • We add the decorator to make sure that whenever the data changes, any component using this data will be updated.getTextInputValue does the same thing that getTodos does, but for the _textInputValue valueNow 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.We import the dependencies we will need for the fileWe create a State interface, and in it we declare a todos array and a todo stringWe 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.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:npm run buildNext, 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 .

ReSub is a library released by Microsoft + Open Source for writing React components that automatically manages subscriptions to data sources simply by accessing them. In my opinion, the closest thing…

@ReactiveConf: Managing state in #ReactJS and React Native using ReSub:

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.

branch.

, and install the necessary React and React Native types as well as the ReSub dependency.

react-native init rnresub

// then cd into directory after project is created

cd rnresub

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

npm i typescript –save-dev

3. Install types

npm i @types/react-native @types/react –save-dev

4. Install ReSub

npm i resub –save

add the following config:

“compilerOptions”: {

“target”: “es2015”,

“module”: “commonjs”,

“jsx”: “react”,

“outDir”: “build”,

“rootDir”: “src”,

“allowSyntheticDefaultImports”: true,

“noImplicitAny”: true,

“experimentalDecorators”: true,

“preserveConstEnums”: true,

“allowJs”: true,

“sourceMap”: true

“exclude”: [

“index.android.js”,

“index.ios.js”,

“build”,

“node_modules”,

“__tests__”

, in our app build).

) will be created for us when the typescript is compiled.

directory, which is where we will be writing all of our TypeScript.

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

“scripts”: {

“start”: “node node_modules/react-native/local-cli/cli.js start”,

“test”: “jest”,

“build”: “tsc -w”

flag will tell the compiler to watch the files for any changes, and when changes happen, it will recompile the code automatically.

). The store will be our data store.

mkdir src

touch src/App.tsx src/TodosStore.tsx

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

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

import React, { Component } from ‘react’

import {

} from ‘react-native’

import App from ‘./build/App’

Now we can go about creating our store.

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

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

class of React.

Now in the terminal, run typescript:

npm run build

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 software consultant and trainer and the founder of React Native Training where we teach developers at top companies around the world how to quickly get up and running with React Native.

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

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

Managing State in React and React Native using ReSub