You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Adam Zielonka e4f30f4dc9 Change isTooMatch to canAddMore 1 year ago
public Update favicon 2 years ago
src Change isTooMatch to canAddMore 1 year ago
.eslintignore Add eslint 2 years ago
.eslintrc.yml Add eslint 2 years ago
.gitignore Add CI 2 years ago
.gitlab-ci.yml Add CI 2 years ago
LICENSE Add LICENSE 2 years ago
README.md Update readme 2 years ago
package.json Add CI 2 years ago
tsconfig.json Initialize project using Create React App 2 years ago
yarn.lock Add CI 2 years ago

README.md

Mobx example

This project exist to show my friends that using Mobx is easy.

Demo: mobx-example.adamzielonka.pro

How to use mobx

You can find more in documentation mobx.js.org/react-integration.html

How I use mobx

Installation

Firstly I do is adding mobx and mobx-react-lite to my project

$ yarn add mobx mobx-react-lite

Create main store

Next I create store that will be contain all stores. If I have a lot of store classes, I create main store in ./src/store/Store.ts, if not I just create file in src folder: ./src/Store.ts:

import { makeAutoObservable } from 'mobx'

export class Store {
  constructor() {
    makeAutoObservable(this)
  }
}

export const store = new Store()

I also make this store visible in browser by adding this to lines to end of main store file:

declare global { interface Window { store: Store; }}
window.store = store

Add some fields, actions and computed value

An empty store is useless so I filled it with a few things:

import { makeAutoObservable } from 'mobx'

export class Store {
  counter = 0 // I am field

  constructor() {
    makeAutoObservable(this)
  }

  // I am computed value
  get doubleCounter(): number {
    return counter * 2
  }

  // I am action
  counterUp = (): void => {
    this.counter += 1
  }
}

Use store in react

import React from 'react'
import { observer } from 'mobx-react-lite'
import { store } from './Store'

const App = (): JSX.Element => {
  const { counter, doubleCounter, counterUp } = store

  return <div className='app'>
    <p>Counter: {counter}</p>
    <p>Double counter: {doubleCounter}</p>
    <p><button onClick={() => counterUp()} >+1</button></p>
  </div>
}

// App will be re rendered if counter or doubleCounter change
export default observer(App)

Enjoying a working application

The best part of creating a working application is that make me happy.