{ "title": "Stories by Wei Herr Teng on Medium", "description": "Stories by Wei Herr Teng on Medium", "link": "https://medium.com/@tengweiherr?source=rss-2d2d00a2592a------2", "image": "https://cdn-images-1.medium.com/fit/c/150/150/1*nG6y3XK2WX-gSQkCg9YVtQ.jpeg", "category": [], "items": [ { "id": "https://medium.com/p/3f36d1909950", "title": "MobX with React functional components — better than Redux?", "link": "https://tengweiherr.medium.com/mobx-with-react-functional-components-better-than-redux-3f36d1909950?source=rss-2d2d00a2592a------2", "author": "Wei Herr Teng", "published": 1675687096000, "created": 1675687096000, "category": [ "redux", "javascript", "mobx", "react", "typescript" ], "content": "

MobX with React functional components setup — better than Redux?

Recommended MobX setup with React functional components

\"\" — Photo by Ferenc Almasi on Unsplash

Background
Core concept
— State
— Action
— Derivations
How it works
MobX file structure in React with functional components
APIs
— observable & makeObservable
— makeAutoObservable
— observer
— action
— runInAction
— ⚠️ Handling promises
— computed
— autorun
— reaction
— when
— ⚠️ Tips on autorun, reaction and when
Summary: MobX’s equivalent React hooks and class component
Debugging
— trace
Conclusion

Background

Coming from a background of Redux user, I used to believe Redux was the best option for global state management. You might notice that in most of the online tutorial, the state management library to be chosen in React project is always Redux. As a software engineering beginner tutored by YouTube, I was surprised by how clean and straight forward MobX is when I was working on a MobX project. Comparing to Redux, MobX is much cleaner, simpler yet still as powerful as Redux. It is even more optimal in performance comparing to Redux. However, there is not much discussion about MobX, especially with functional React on the internet. After digging deep into MobX library and implementing it in React, I would like to share my preferred practice with MobX + React functional components, along with code examples in TypeScript.

This article will focus on the MobX concept, basic usage with React functional components and my recommended setup with functional React. Please be informed that I will explain them with my own understanding, and will only cover the APIs that I often use. For detailed explanation and more advanced APIs, you can visit MobX for more information.

Core concept

Boilerplate-free, optimal rendering, un-opinionated (Any UI framework works)

Anything that can be derived from the application state, should be. Automatically. — from MobX documentation

State

Annotated as observable
Properties you want to observe or change over time
Accept any primitive or non-primitive data: objects, arrays, classes, maps, sets etc
Equivalent to useState’s state variable

Action

Annotated as action, runInAction
Function that changes the observable state
Equivalent to useState’s setter function

Derivations

Anything that can be derived from the observable state without any further interaction
They are tracked functions, which will be updated automatically when its corresponding observable state is modified
Equivalent to useEffect (kind of)

There are 2 types of Derivations:

Computed values

Annotated as computed
Value that can be derived from the observable state
Producing variable only

2. Reactions

Annotated as autorun, reaction, when
Side effects that need to happen automatically when the observable state changes
UI re-rendering, HTTP requests, printing consoles

How it works

\"\" — *Data flow presentation from* *MobX documentation*

Uni-directional data flow where:

Actions to trigger the update of the observable state
State updated notifies derivations to be updated
Triggers Derivations

Its optimal performance is due to:

Computed values are updated lazily. Any computed value that is not actively in use will not be updated until it is needed for a side effect (I/O). If a view is no longer in use it will be garbage collected automatically.

MobX file structure in React with functional components

I will be showing an example of setting up an simple price calculator.

The file structure:

\"\" — MobX + functional React setup file structure

First we run yarn add mobx mobx-react-lite in terminal to install MobX in React.

We make use of classes in JavaScript to setup MobX store. We create our calculator store with a class object called CalculatorStore for all the logics regarding to it. Here we declare variables price and amount, functions increasePrice() and increaseAmount() to update the states, and a getter function total() to calculate the total price. As usual, there is always a constructor in a class, and here we call makeAutoObservable(this) in the constructor, which will translate our variables and functions to MobX instances. In this case price and amount will be annotated as observable, increasePrice() and increaseAmount() will be annotated as action, while getter function total() will be annotated as computed.

/utils/store/timer-store.ts

import { makeAutoObservable } from \"mobx\"

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeAutoObservable(this)
    }

    increasePrice() {
        this.price += 1
    }

    increaseAmount() {
        this.amount += 1
    }

    get total() {
        return this.price * this.amount
    }

}

Next, we create an index.ts within the store folder to import all the stores, initiate them and export them in one file. It might seem redundant for one store, but in real world project we will have a lot of stores created. It is much cleaner than exporting all the stores with their respective file.

/utils/store/index.ts

import { CalculatorStore } from \"./calculator-store\";

const calculatorStore = new CalculatorStore()

export { calculatorStore }

Eventually this is our component Calculator.tsx. To use MobX with functional React, we can wrap our component with an observer HoC. observer is provided by a separate React bindings package of MobX called mobx-react-lite. We pass in calculator store as a prop to access the store we have initiated in the /utils/store/index.ts.

Timer.tsx

import { useEffect } from \"react\"
import { autorun } from \"mobx\"
import { observer } from \"mobx-react-lite\"
import { CalculatorStore } from \"../utils/store/calculator-store\"

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {

    // Effect that triggers upon observable changes.
    useEffect(() => {
        const disposer = autorun(() => {
            if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
        })
        return () => disposer()
    },[])

    return (
        
            Price: {calculatorStore.price}

            

            Amount: {calculatorStore.amount}

              
      
            Total: {calculatorStore.total}
      
        

    )

}
export default observer(Calculator)

The result:

\"\" — Simple price calculator on browser

That’s it! It is definitely a faster and less boilerplate setup comparing to Redux. Let’s break it down and explain along with the respective MobX API.

APIs

observable & makeObservable

observable defines a trackable field that stores the state
makeObservable make the object passed in become observable
These 2 APIs are used together to provide reactive component with observable states
Equivalent to useState’s state variable

import { makeObservable, observable } from \"mobx\"

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeObservable(this, {
            price: observable,
            amount: observable,
        })
    }

}

makeAutoObservable

makeAutoObservable is a shortcut to translate the class fields to MobX instances
It infers all the properties by default, such as:

All own properties become observable
All getters become computed
All setters become action

import { makeAutoObservable } from \"mobx\"

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeAutoObservable(this)
    }

    increasePrice() {
        this.price += 1
    }

    increaseAmount() {
        this.amount += 1
    }

    get total() {
        return this.price * this.amount
    }

}

observer

observer is a HoC which can be used to wrap a react component so that it will automatically detect that rendering depends on observable states inside

import { observer } from \"mobx-react-lite\"
import { CalculatorStore } from \"../utils/store/calculator-store\"

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {
    return (
        
            Price: {calculatorStore.price}

            

            Amount: {calculatorStore.amount}

              
      
            Total: {calculatorStore.total}
      
        

    )
}
export default observer(Calculator)

action

action is a function which modifies the observable state
You still can update the state without declaring it as action , but it is recommended to do so. With this practice, MobX can automatically apply transactions for effortless optimal performance
When handling promises, the handlers that update state should be actions or should be annotated as action (We will discuss later)
Equivalent to useState’s setter function

export class DateStore {
    date: any

    constructor() {
        makeAutoObservable(this)
        autorun(()=>{
         this.setDate(new Date())
        })
    }

    setDate(date:Date) {
        this.date = date
    }
  
}

runInAction

runInAction creates an one-time action that is immediately invoked
It wraps a function
Most suitable when you just need to update the state once, so you don’t need to create an action separately just to do it once
We have to use runInAction to allow making changes outside of an action

export class DateStore {
    date: any

    constructor() {
        makeAutoObservable(this)
        runInAction(()=>{
            this.date = new Date()
        })
    }

}

⚠️ Handling promises

When handling promises, even if the function that makes the promise handling itself is already an action, since it runs after the original action finished, the promise handling part should be annotated as action again. It can be done by:

Separating them in different class fields, as they will be annotated as action by makeAutoObservable automatically

export class TodoStore {

    todos:any

    abortController?: AbortController

    constructor() {
        makeAutoObservable(this)
    }

    abortRequest() {
        if(this.abortController) this.abortController.abort()
    }

    fetchRequest(){
        runInAction(() => {
            this.abortController = new AbortController();
        })
        if(this.abortController){
            const signal = this.abortController.signal
            fetch('',{signal})
             .then(this.fetchSuccess, this.fetchFailure)
        }
    }

    fetchSuccess = todos => {
        this.todos = todos.json()
    }

    fetchFailure = error => {
        if (!this.abortController.signal.aborted) console.log(error)
    }
}

2. Using runInAction

export class TodoStore {

    todos:any

    abortController?: AbortController

    constructor() {
        makeAutoObservable(this)
    }

    abortRequest() {
        if(this.abortController) this.abortController.abort()
    }

    fetchRequest(){
        runInAction(() => {
            this.abortController = new AbortController();
        })
        if(this.abortController){
            const signal = this.abortController.signal
            fetch('',{signal})
             .then(response => response.json())
             .then(result => {
                runInAction(() => {
                  this.todos = result
                })
              })
             .catch(error => {
                 if (!this.abortController.signal.aborted) console.log(error)
              })
        }
    }

}

In the component, fetch it in useEffect() and return the cleanup function abortRequest() when the component unmounts.

useEffect(() => {
    todoStore.fetchRequest()
    return () => todoStore.abortRequest()
},[])

computed

computed is a JS get function that will derive new facts from the state and cache its output (highly optimised)
Only recomputes if one of the underlying observables has changed
No parameters accepted and must return a value

We can use the calculator example earlier but with some changes to explain how computed works.

calculator-store.ts

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeAutoObservable(this)
    }

    increasePrice(price:number) {
        this.price += price
    }

    increaseAmount() {
        this.amount += 1
    }

    get total() {
        return this.price * this.amount
    }

}

Calculator.tsx

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {

    const [input, setInput] = useState(0)

    // Effect that triggers upon observable changes.
    useEffect(()=>{
        const disposer = autorun(() => {
            if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
        })
        return () => disposer()
    },[])

    return (
        
            Price: {calculatorStore.price}

            setInput(parseInt(e.target.value))}/>
            

            Amount: {calculatorStore.amount}

             

            Total: {calculatorStore.total}
   
        

    )
}
export default observer(Calculator)

Please take note on this part of codes. What it does is to print the statement to console when computed is called. We will explain about autorun later.

useEffect(()=>{
    const disposer = autorun(() => {
        if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
    })
    return () => disposer()
},[])

So in this case when we click the button with Increase Amount, the total is still 0, of course, because price is still 0. At the same time it won’t print anything in console, although the observable amount underlying is updated! This is because the result of total is the same.

\"\" — After clicking **Increase Amount** button 5 times

But if we set 50 in the price input and click Increase Price, the total is now updated to 250. Yes it is a simple math, but now it prints a statement in the console, which means the total() is now called! This is because the result of total now is different from previous result.

\"\" — After setting 50 in price input and clicking **Increase Price** button

So in short, computed watches the observables underlying. It will only recompute when it is initialised, and when its output is different.

autorun

autorun reads & subscribes the observable state
It runs the first time & every time the observable state underlying changes
It only responds to changes in observable state or things annotated observable or computed
To integrate it in React functional component, we need to make use of useEffect() to initialise it when the component mounts
Equivalent to useEffect with dependency

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {

  const [input, setInput] = useState(0)

    // Effect that triggers upon observable changes.
    useEffect(() => {
        const disposer = autorun(() => {
            if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
        })
        return () => disposer()
    },[])

    return (
        
            Price: {calculatorStore.price}

            setInput(parseInt(e.target.value))}/>
            

            Amount: {calculatorStore.amount}

             

            Total: {calculatorStore.total}
   
        

    )
}
export default observer(Calculator)

reaction

It takes two functions as parameters:

Data function: It returns the data that is used as input for the second, effect function
Effect function: Only reacts to data that was accessed in the data function

reaction(
  () => value, 
  (value, previousValue, reaction) => { sideEffect }
  , options?
)

The result of the data function has to change in order for the effect function to be triggered
It works almost like autorun but it don't run when initialised, instead only run after the data function returns a new value for the first time
Like autorun, we also need to make use of useEffect() to initialise it when the component mounts

useEffect(()=>{
  const disposer = reaction(
      () => calculatorStore.total,
      total => {
        if (total > 100) console.log(\"Total exceeds 100\")
        else console.log(\"Total less than 100\")
      }
    )
  return () => disposer()
},[])

when

It takes two functions as parameters as well:

Predicate function: It observes and run until it returns true
Effect function: To be executed when predicate is true

when(predicate: () => boolean, effect?: () => void, options?)
//or...
when(predicate: () => boolean, options?): Promise

It will be disposed automatically when the predicate function returns true and the effect function executed
Really useful for disposing autorun and reaction earlier if you don’t need them anymore instead of waiting until the component unmount

useEffect(() => {

    const disposer = autorun(() => {
        if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
    })

    when(
        () => calculatorStore.total > 100,
        () => disposer()
    )

},[])

⚠️ Tips on autorun, reaction and when

autorun, reaction and when will keep waiting forever for new changes to happen in the observables they use. Hence, they are designed to return a disposer function that can be used to stop them and unsubscribe from any observables they used. To avoid memory leaks, it is strongly recommended to always assign them to a variable called disposer and call this variable to stop them from waiting.

Also always return autorun, reaction orwhen in useEffect(). This ensures that the reaction is only created once, and removed when the component is unmounted.

Assign reactions to disposer, and call them to stop them from waiting

const disposer = autorun(() => {
    ...
})

disposer()

2. Return reactions in useEffect React hook

useEffect(() => {

    const disposer = autorun(() => {
        ...
    })

    return () => disposer()

},[])

3. Implement of when

useEffect(() => {

    const disposer = autorun(() => {
        ...
    })

    when(
        () => yourCondition,
        () => disposer()
    )

},[])

Summary: MobX’s equivalent React hooks and class component

Debugging

trace

calling trace() inside tracked functions like computed and autorun to verify what observables MobX are tracking. The tracing will be printed in the console.

get total() {
    trace()
    return this.price * this.amount
}

// Output: 
// [mobx.trace] 'CalculatorStore@1.total' tracing enabled
// [mobx.trace] 'CalculatorStore@1.total' is invalidated due to a change in: 'CalculatorStore@1.price'

We can trace reaction by using trace() outside of the function:

const disposer = reaction(
...
)
trace(disposer)

Conclusion

I believe these APIs will cover most of the use cases. You can see how easy and clean setup it is comparing to Redux or even with Redux Toolkit. Unlike Redux, we don’t need extra hooks like useSelector and useDispatch to manage the states, a lot of boilerplate to create store and reducer, extra tweak to work with TypeScript and etc. To deal with async tasks like HTTP requests, MobX has much simpler way to do it unlike Redux implementing with its middleware tool such as redux-thunk.

However, what it all comes down to is personal preference. There is no right or wrong on choosing your tool, as long as they works :) Please leave a comment if you have better ideas and give a thumbs-up if you find this article helpful!

$\"\"$ ", "enclosures": [], "content_encoded": "

MobX with React functional components setup — better than Redux?

Recommended MobX setup with React functional components

\"\" — Photo by Ferenc Almasi on Unsplash

Background
Core concept
— State
— Action
— Derivations
How it works
MobX file structure in React with functional components
APIs
— observable & makeObservable
— makeAutoObservable
— observer
— action
— runInAction
— ⚠️ Handling promises
— computed
— autorun
— reaction
— when
— ⚠️ Tips on autorun, reaction and when
Summary: MobX’s equivalent React hooks and class component
Debugging
— trace
Conclusion

Background

Core concept

Boilerplate-free, optimal rendering, un-opinionated (Any UI framework works)

Anything that can be derived from the application state, should be. Automatically. — from MobX documentation

State

Annotated as observable
Properties you want to observe or change over time
Accept any primitive or non-primitive data: objects, arrays, classes, maps, sets etc
Equivalent to useState’s state variable

Action

Annotated as action, runInAction
Function that changes the observable state
Equivalent to useState’s setter function

Derivations

Anything that can be derived from the observable state without any further interaction
They are tracked functions, which will be updated automatically when its corresponding observable state is modified
Equivalent to useEffect (kind of)

There are 2 types of Derivations:

Computed values

Annotated as computed
Value that can be derived from the observable state
Producing variable only

2. Reactions

Annotated as autorun, reaction, when
Side effects that need to happen automatically when the observable state changes
UI re-rendering, HTTP requests, printing consoles

How it works

\"\" — *Data flow presentation from* *MobX documentation*

Uni-directional data flow where:

Actions to trigger the update of the observable state
State updated notifies derivations to be updated
Triggers Derivations

Its optimal performance is due to:

Computed values are updated lazily. Any computed value that is not actively in use will not be updated until it is needed for a side effect (I/O). If a view is no longer in use it will be garbage collected automatically.

MobX file structure in React with functional components

I will be showing an example of setting up an simple price calculator.

The file structure:

\"\" — MobX + functional React setup file structure

First we run yarn add mobx mobx-react-lite in terminal to install MobX in React.

/utils/store/timer-store.ts

import { makeAutoObservable } from \"mobx\"

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeAutoObservable(this)
    }

    increasePrice() {
        this.price += 1
    }

    increaseAmount() {
        this.amount += 1
    }

    get total() {
        return this.price * this.amount
    }

}

/utils/store/index.ts

import { CalculatorStore } from \"./calculator-store\";

const calculatorStore = new CalculatorStore()

export { calculatorStore }

Timer.tsx

import { useEffect } from \"react\"
import { autorun } from \"mobx\"
import { observer } from \"mobx-react-lite\"
import { CalculatorStore } from \"../utils/store/calculator-store\"

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {

    // Effect that triggers upon observable changes.
    useEffect(() => {
        const disposer = autorun(() => {
            if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
        })
        return () => disposer()
    },[])

    return (
        
            Price: {calculatorStore.price}

            

            Amount: {calculatorStore.amount}

              
      
            Total: {calculatorStore.total}
      
        

    )

}
export default observer(Calculator)

The result:

\"\" — Simple price calculator on browser

That’s it! It is definitely a faster and less boilerplate setup comparing to Redux. Let’s break it down and explain along with the respective MobX API.

APIs

observable & makeObservable

observable defines a trackable field that stores the state
makeObservable make the object passed in become observable
These 2 APIs are used together to provide reactive component with observable states
Equivalent to useState’s state variable

import { makeObservable, observable } from \"mobx\"

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeObservable(this, {
            price: observable,
            amount: observable,
        })
    }

}

makeAutoObservable

makeAutoObservable is a shortcut to translate the class fields to MobX instances
It infers all the properties by default, such as:

All own properties become observable
All getters become computed
All setters become action

import { makeAutoObservable } from \"mobx\"

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeAutoObservable(this)
    }

    increasePrice() {
        this.price += 1
    }

    increaseAmount() {
        this.amount += 1
    }

    get total() {
        return this.price * this.amount
    }

}

observer

observer is a HoC which can be used to wrap a react component so that it will automatically detect that rendering depends on observable states inside

import { observer } from \"mobx-react-lite\"
import { CalculatorStore } from \"../utils/store/calculator-store\"

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {
    return (
        
            Price: {calculatorStore.price}

            

            Amount: {calculatorStore.amount}

              
      
            Total: {calculatorStore.total}
      
        

    )
}
export default observer(Calculator)

action

action is a function which modifies the observable state
You still can update the state without declaring it as action , but it is recommended to do so. With this practice, MobX can automatically apply transactions for effortless optimal performance
When handling promises, the handlers that update state should be actions or should be annotated as action (We will discuss later)
Equivalent to useState’s setter function

export class DateStore {
    date: any

    constructor() {
        makeAutoObservable(this)
        autorun(()=>{
         this.setDate(new Date())
        })
    }

    setDate(date:Date) {
        this.date = date
    }
  
}

runInAction

runInAction creates an one-time action that is immediately invoked
It wraps a function
Most suitable when you just need to update the state once, so you don’t need to create an action separately just to do it once
We have to use runInAction to allow making changes outside of an action

export class DateStore {
    date: any

    constructor() {
        makeAutoObservable(this)
        runInAction(()=>{
            this.date = new Date()
        })
    }

}

⚠️ Handling promises

Separating them in different class fields, as they will be annotated as action by makeAutoObservable automatically

export class TodoStore {

    todos:any

    abortController?: AbortController

    constructor() {
        makeAutoObservable(this)
    }

    abortRequest() {
        if(this.abortController) this.abortController.abort()
    }

    fetchRequest(){
        runInAction(() => {
            this.abortController = new AbortController();
        })
        if(this.abortController){
            const signal = this.abortController.signal
            fetch('',{signal})
             .then(this.fetchSuccess, this.fetchFailure)
        }
    }

    fetchSuccess = todos => {
        this.todos = todos.json()
    }

    fetchFailure = error => {
        if (!this.abortController.signal.aborted) console.log(error)
    }
}

2. Using runInAction

export class TodoStore {

    todos:any

    abortController?: AbortController

    constructor() {
        makeAutoObservable(this)
    }

    abortRequest() {
        if(this.abortController) this.abortController.abort()
    }

    fetchRequest(){
        runInAction(() => {
            this.abortController = new AbortController();
        })
        if(this.abortController){
            const signal = this.abortController.signal
            fetch('',{signal})
             .then(response => response.json())
             .then(result => {
                runInAction(() => {
                  this.todos = result
                })
              })
             .catch(error => {
                 if (!this.abortController.signal.aborted) console.log(error)
              })
        }
    }

}

In the component, fetch it in useEffect() and return the cleanup function abortRequest() when the component unmounts.

useEffect(() => {
    todoStore.fetchRequest()
    return () => todoStore.abortRequest()
},[])

computed

computed is a JS get function that will derive new facts from the state and cache its output (highly optimised)
Only recomputes if one of the underlying observables has changed
No parameters accepted and must return a value

We can use the calculator example earlier but with some changes to explain how computed works.

calculator-store.ts

export class CalculatorStore {

    price = 0

    amount = 1

    constructor() {
        makeAutoObservable(this)
    }

    increasePrice(price:number) {
        this.price += price
    }

    increaseAmount() {
        this.amount += 1
    }

    get total() {
        return this.price * this.amount
    }

}

Calculator.tsx

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {

    const [input, setInput] = useState(0)

    // Effect that triggers upon observable changes.
    useEffect(()=>{
        const disposer = autorun(() => {
            if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
        })
        return () => disposer()
    },[])

    return (
        
            Price: {calculatorStore.price}

            setInput(parseInt(e.target.value))}/>
            

            Amount: {calculatorStore.amount}

             

            Total: {calculatorStore.total}
   
        

    )
}
export default observer(Calculator)

Please take note on this part of codes. What it does is to print the statement to console when computed is called. We will explain about autorun later.

useEffect(()=>{
    const disposer = autorun(() => {
        if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
    })
    return () => disposer()
},[])

\"\" — After clicking **Increase Amount** button 5 times

\"\" — After setting 50 in price input and clicking **Increase Price** button

So in short, computed watches the observables underlying. It will only recompute when it is initialised, and when its output is different.

autorun

autorun reads & subscribes the observable state
It runs the first time & every time the observable state underlying changes
It only responds to changes in observable state or things annotated observable or computed
To integrate it in React functional component, we need to make use of useEffect() to initialise it when the component mounts
Equivalent to useEffect with dependency

type CalculatorProps = {
    calculatorStore: CalculatorStore
}

const Calculator = ({calculatorStore}:CalculatorProps) => {

  const [input, setInput] = useState(0)

    // Effect that triggers upon observable changes.
    useEffect(() => {
        const disposer = autorun(() => {
            if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
        })
        return () => disposer()
    },[])

    return (
        
            Price: {calculatorStore.price}

            setInput(parseInt(e.target.value))}/>
            

            Amount: {calculatorStore.amount}

             

            Total: {calculatorStore.total}
   
        

    )
}
export default observer(Calculator)

reaction

It takes two functions as parameters:

Data function: It returns the data that is used as input for the second, effect function
Effect function: Only reacts to data that was accessed in the data function

reaction(
  () => value, 
  (value, previousValue, reaction) => { sideEffect }
  , options?
)

The result of the data function has to change in order for the effect function to be triggered
It works almost like autorun but it don't run when initialised, instead only run after the data function returns a new value for the first time
Like autorun, we also need to make use of useEffect() to initialise it when the component mounts

useEffect(()=>{
  const disposer = reaction(
      () => calculatorStore.total,
      total => {
        if (total > 100) console.log(\"Total exceeds 100\")
        else console.log(\"Total less than 100\")
      }
    )
  return () => disposer()
},[])

when

It takes two functions as parameters as well:

Predicate function: It observes and run until it returns true
Effect function: To be executed when predicate is true

when(predicate: () => boolean, effect?: () => void, options?)
//or...
when(predicate: () => boolean, options?): Promise

It will be disposed automatically when the predicate function returns true and the effect function executed
Really useful for disposing autorun and reaction earlier if you don’t need them anymore instead of waiting until the component unmount

useEffect(() => {

    const disposer = autorun(() => {
        if(calculatorStore.total) console.log(\"the total is updated: \" + calculatorStore.total)
    })

    when(
        () => calculatorStore.total > 100,
        () => disposer()
    )

},[])

⚠️ Tips on autorun, reaction and when

Also always return autorun, reaction orwhen in useEffect(). This ensures that the reaction is only created once, and removed when the component is unmounted.

Assign reactions to disposer, and call them to stop them from waiting

const disposer = autorun(() => {
    ...
})

disposer()

2. Return reactions in useEffect React hook

useEffect(() => {

    const disposer = autorun(() => {
        ...
    })

    return () => disposer()

},[])

3. Implement of when

useEffect(() => {

    const disposer = autorun(() => {
        ...
    })

    when(
        () => yourCondition,
        () => disposer()
    )

},[])

Summary: MobX’s equivalent React hooks and class component

Debugging

trace

calling trace() inside tracked functions like computed and autorun to verify what observables MobX are tracking. The tracing will be printed in the console.

get total() {
    trace()
    return this.price * this.amount
}

// Output: 
// [mobx.trace] 'CalculatorStore@1.total' tracing enabled
// [mobx.trace] 'CalculatorStore@1.total' is invalidated due to a change in: 'CalculatorStore@1.price'

We can trace reaction by using trace() outside of the function:

const disposer = reaction(
...
)
trace(disposer)

Conclusion

$\"\"$ ", "media": {} }, { "id": "https://medium.com/p/6808d9d2c069", "title": "Best practices of HTTP requests using redux-thunk (Redux Toolkit + TypeScript)", "link": "https://tengweiherr.medium.com/async-api-requests-with-redux-toolkit-6808d9d2c069?source=rss-2d2d00a2592a------2", "author": "Wei Herr Teng", "published": 1665158493000, "created": 1665158493000, "category": [ "react", "api", "redux-thunk", "redux", "redux-toolkit" ], "content": "

Examples and explanation on HTTP CRUD requests using createAsyncThunk middleware

Problem Statement

I used to make API calls separately after getting the updated state from the Redux reducer before finding this cleaner way to do it. After doing some research on it and its alternative solutions, I decided to write down the things I have learned. I welcome any comments you may have.

Background: Redux and its usage

Redux is a library for managing global states that can be accessed and updated across the entire React application. Redux makes it easier comparing to traditional React data passing pattern which is passing data as parameters to child components. Redux helps to avoid props drilling (the data is being passed through too much layers) but it is not always the best choice to manage states in our application. In fact, I will only apply Redux on certain states that will be accessed in many layers. I will remain the rest with React useState hook and passing them into child components if they are only needed for 1 or 2 layers. Please check this articles to find out when to use Redux and when not to

Why react-thunk middleware?

Redux only supports synchronous tasks. Redux reducer only focuses on managing states in the application itself, and never contains “side effect” which is task that happens other than changing the state. Sometimes we will need to perform an HTTP request to server to update the database at the same time. To perform this “side effect” task, we will need the help from thunk middleware.

Things that thunk middleware can do:

HTTP requests
Accessing AsyncStorage / AsyncLocalStorage
Async timer

Thunk middleware lies between action dispatched and reducers in the Redux data flow:

Action dispatched — Middleware — Reducer — Store — Component re-renders

Thunk middleware can access the action object dispatched and do something about it before it reaching the reducer.

Solution: Examples and explanation

In this article, we will be looking at the examples on how I design and execute the asynchronous tasks such as HTTP requests using Redux Toolkit and TypeScript. (Redux-thunk is automatically set up in Redux Toolkit’s configureStore function). Before I start, I will assume you are already familiar with React, Redux, Redux Toolkit, TypeScript and how HTTP request and API integration works. I will skip the setup part and dive into the react-thunk functions directly.

We first create a seperate file and write our thunk functions using createAsyncThunk.

createAsyncThunk takes 3 parameters which are action type value(string), payloadCreator callback function and options object. The type will auto-generates pending, fulfilled and rejected action type constants to represent the lifecycle of the async request. The payloadCreator will return the promise return value of the async request. payloadCreator takes optional parameters which are arg any value like userID passing into the function and thunkAPI object containing signal AbortController Signal and rejectWithValue customising your own value when the async request failed. More about createAsyncThunk

2. We then export the thunk functions and include them in our slice using extraReducers. The extraReducers is like our normal reducers but with enhancement. As case reducers specified with extraReducers are meant to reference external actions like API calls, they will not generate action creator function like reducers. More about extraReducers and reducers

Make sure you are using builder callbacks and passing thunk functions to builder.addCase() so it infers action types correctly. But when we add all the cases for each async task, there will be a big chunk of repeated codes. Since we always do the same thing when the async task is pending or rejected, we can group them using builder.addMatcher() so it looks cleaner.

Please make sure that all calls to builder.addCase must come before any calls to builder.addMatcher. In this case, builder.addMatcher will execute the repeated task when each action is pending, fulfilled and rejected respectively, after the specific builder.addcase method. More about builder methods

3. Lastly we import and add our thunks in our components.

Please refer to the redux documentation on how to type the useSelector and useDispatch hooks if you feel confused on the useAppSelector and useAppDispatch.

Alternative async request solutions:

Other middleware like Redux Saga
createListenerMiddleware (able to be removed dynamically in runtime and run callbacks in response to dispatched action)
RTK Query

Alternative state management solutions:

React useState hook (Not available for global state)
React useReducer hook (Good for complex logic but still not available for global state)
React Context API useContext (Avoid this if the global state to apply is complex or changing frequently)

Just an entry-level software engineer’s learning diary :) Please leave a comment if you have better ideas and give a thumbs-up if you find this article helpful!

$\"\"$ ", "enclosures": [], "content_encoded": "

Examples and explanation on HTTP CRUD requests using createAsyncThunk middleware

Problem Statement

Background: Redux and its usage

Why react-thunk middleware?

Things that thunk middleware can do:

HTTP requests
Accessing AsyncStorage / AsyncLocalStorage
Async timer

Thunk middleware lies between action dispatched and reducers in the Redux data flow:

Action dispatched — Middleware — Reducer — Store — Component re-renders

Thunk middleware can access the action object dispatched and do something about it before it reaching the reducer.

Solution: Examples and explanation

We first create a seperate file and write our thunk functions using createAsyncThunk.

3. Lastly we import and add our thunks in our components.

Please refer to the redux documentation on how to type the useSelector and useDispatch hooks if you feel confused on the useAppSelector and useAppDispatch.

Alternative async request solutions:

Other middleware like Redux Saga
createListenerMiddleware (able to be removed dynamically in runtime and run callbacks in response to dispatched action)
RTK Query

Alternative state management solutions:

React useState hook (Not available for global state)
React useReducer hook (Good for complex logic but still not available for global state)
React Context API useContext (Avoid this if the global state to apply is complex or changing frequently)

Just an entry-level software engineer’s learning diary :) Please leave a comment if you have better ideas and give a thumbs-up if you find this article helpful!

$\"\"$ ", "media": {} } ] }

MobX with React functional components setup — better than Redux?

Recommended MobX setup with React functional components

Table of contents

Background

Core concept

State

Action

Derivations

How it works

MobX file structure in React with functional components

APIs

observable & makeObservable

makeAutoObservable

observer

action

runInAction

⚠️ Handling promises

computed

autorun

reaction

when

⚠️ Tips on autorun, reaction and when

Summary: MobX’s equivalent React hooks and class component

Debugging

trace

Conclusion

MobX with React functional components setup — better than Redux?

Recommended MobX setup with React functional components

Table of contents

Background

Core concept

State

Action

Derivations

How it works

MobX file structure in React with functional components

APIs

observable & makeObservable

makeAutoObservable

observer

action

runInAction

⚠️ Handling promises

computed

autorun

reaction

when

⚠️ Tips on autorun, reaction and when

Summary: MobX’s equivalent React hooks and class component

Debugging

trace

Conclusion

Examples and explanation on HTTP CRUD requests using createAsyncThunk middleware

Problem Statement

Background: Redux and its usage

Why react-thunk middleware?

Solution: Examples and explanation

Alternative async request solutions:

Alternative state management solutions:

Examples and explanation on HTTP CRUD requests using createAsyncThunk middleware

Problem Statement

Background: Redux and its usage

Why react-thunk middleware?

Solution: Examples and explanation

Alternative async request solutions:

Alternative state management solutions:

My tech blog

Where I document what I've learn and share them to others.