Mobx with Reactjs Simple Counter app ( No more Redux PART – 2)

Mobx with Reactjs Simple Counter app ( No more Redux PART – 2)

As you already know, we have started our mobx with react journey with our last post. If this is your first time here, you should see the first tutorial first. Otherwise you will get some errors. Follow part 1 first. So,then lets start our first application.

I have already made my new application using create-react-app and i will show my file structure. I have already made 2 new files called CounterStore.js and Counter.js. I am not encouraging you to have a this kind of file structure if you are making a proper application. Since this is a small demo, im putting each and every new file inside ‘SRC’ folder. But when you make your real app, you need to make a new directory for stores. This is my file structure.

So, here im only editing 3 files. im going to edit, App.js , CounterStore.js , Counter.js . As you already know, we need mobx to manage our global states. So, to do that, we need to have some kind of store to store our global states. So, i have created CounterStore.js. Lets have a loot at CounterStore.js file.

import {observable} from 'mobx';

class CounterStore {
  @observable counter = 0;     // Creating a observable for count 

  increment() { this.counter++; }      //function to increase the counter

  decrement() { this.counter--; }    //function to decrease the counter
}

export default new CounterStore();

This is a simple class and im importing observable from mobx. inside the class we have 3 things. We have a counter variable. But it is an observable. This is the value we are going to change from another page. We have another two simple functions here. one is for increase the value of counter observable and other one is to decrease the value of counter observable. Since we cant do these things inside another page, we need to define each and every function here. Now, we can call this counter observable value and the other two functions. Let me show you how to do it. This is the code of my Counter.js.

import React,{button,Component} from 'react';
import {observer} from 'mobx-react'; // importing mobx
import store from './CounterStore'; //importing CounterStore

  @observer     // making this class a observable class
  export default class Counter extends Component {
    render() {
      return (
        <div>
      <button onClick={() => store.increment()}>+1</button> 
      <span>{store.counter}</span>
      <button onClick={() => store.decrement()}>-1</button>
    </div>
      );
    }
  }

In this file, im importing observer from mobx-react and importing CounterStore as store. Then using the observer decorator, im making this class a observer class. After that we can access to CounterStore observable  and it’s functions easily. To get the value of the counter observable, we can use store.counter. To access to increase function, we can use store.increment(). So, at the end we need to connect this counter component to App.js . It is easy. Because you are doing it everyday when you use react. This is my app.js

import React, { Component } from "react";
import Counter from "./Counter";  //importing counter

export default class App extends Component {
  render() {
    return (
      <div>
        <Counter />
      </div>
    );
  }
}

That’s it. This is not like Redux. This is easy and fast. And also have decent support from the maintainers. Feel free to share with your friends. And remember , this is the same way you need to use, if you need to use mobx with react native. I will make another tutorial about react native later. Cheers!!!

I am Pasindu dineth peiris and im working as a software engineer. Im mainly working as a mobile application developer, but i love to work with python and other languages also. Im good with android, ios and also with cross platform frameworks like ionic 2, Nativescript, Fusetools. Using this website i am going to teach what i learn. KIT..

Leave a Reply

Your email address will not be published. Required fields are marked *