MobX & React Native Functional Component : How can we implement mobX in React Native Functional Component?

user_13942929 0
Viewed 2435

The code below is just an example I found online.

import { observable, computed } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { SafeAreaView, Text, TextInput, StyleSheet } from "react-native";
@observer
class Shop extends React.Component {
    @observable price = 9;
    @observable quantity = 11;
    @computed get total() {
            return this.price * this.quantity;
    }
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Text>Price: </Text>
                <TextInput value={this.price} onChangeText={value => { this.price = value }} />
                <Text>Quantity: </Text>
                <TextInput value={this.quantity} onChangeText={value => { this.quantity = value }} />
                <Text>Total (Price and Quantity): {this.total}</Text>
            </SafeAreaView>
        )
    }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

Sadly, most of the example about MobX in React Native I found online are used for Class Component.

Could anyone kind convert this code into a functional component?

Thank you

react-functional-component react-native mobx reactjs state-management
2 Answers

Here is some idea on how you can use this in functional component. (note that I haven't tested the code, but this is for you to give the direction)

1. Create a class for Shop Store, which should be something like this.

import { observable, computed, action } from "mobx";

export class ShopStore {

    @observable price;
    @observable quantity;
    
    constructor (value) {
        this.id = 9;
        this.quantity = 11;
    }

    @computed get total() {
        return this.price * this.quantity;
    }

    // Use @action to modify state value
    @action setPrice = (price) => {
        this.price = price;
    }

    // Use @action to modify state value
    @action setQuantity = (quantity) => {
        this.quantity = quantity;
    }
}

2. Initialize Mobx store in your App.js

import React from 'react';
import { ShopStore } from './src/mobx/store';
import ShopComponent from "./src/components/ShopComponent";
function App() {
    const store = new ShopStore()
    return (
        <ShopComponent store={store}/>
    );
}
export default App;

3. Connect mobx observer to functional component

import { observable, computed } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { SafeAreaView, Text, TextInput, StyleSheet } from "react-native";

function ShopComponent(props) {

    const { setPrice, setQuantity } = props.store

    return(
        <SafeAreaView style={styles.container}>
            <Text>Price: </Text>
            <TextInput value={props.store.price} onChangeText={value => { setPrice(value) }} />
            <Text>Quantity: </Text>
            <TextInput value={props.store.quantity} onChangeText={value => { setQuantity(value) }} />
            <Text>Total (Price and Quantity): {props.store.total() }</Text>
        </SafeAreaView>
    )
}
export default observer(ShopComponent);
user_3964760

You could use a solution without decorators, where you instead create your local component state with the useLocalObservable hook:

const Shop = observer(() => {
  const state = useLocalObservable(() => ({
    price: 9,
    setPrice(price) {
      state.price = price;
    },

    quantity: 11,
    setQuantity(quantity) {
      state.quantity = quantity;
    },

    get total() {
      return state.price * state.quantity;
    },
  }));

  return (
    <SafeAreaView style={styles.container}>
      <Text>Price: </Text>
      <TextInput value={state.price} onChangeText={state.setPrice} />
      <Text>Quantity: </Text>
      <TextInput value={this.quantity} onChangeText={state.setQuantity} />
      <Text>Total (Price and Quantity): {state.total}</Text>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});
user_36178860
Related