CODEWITHSUNDEEP
javascriptreactjsreact-nativemobx
Lê Quốc Khánh
Lê Quốc Khánh

Reputation: 605

Use mobX totally functional component

I just learned react and react-native for 3 months , and i highly familiar with functional component, from EVERYTHING, because from first step, i already write a "hello world" in function, and unitl now, i still stick with function, because, i read some blog, and with hooks, learn classes are optional, so i decided to focus on functional component. But when i start to learn MobX, i feel a little bit confuse and struggle, especially with store:

class TodoStore {
    todos: Todo[] = []

    constructor() {
        makeObservable(this, {
            todos: observable,
            unfinishedTodoCount: computed,
            addTodo: action
        })
    }

    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.done).length
    }

    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

A silly-old question, but how constructor() use in functional component? Is that state? But how to apply with mobX, how to convert above class to function or can we just use function for all mobX concept?

Please help, thank you a lot

Upvotes: 1

Views: 2016

Answers (1)

gilamran
gilamran

Reputation: 7294

Functional programming without dynamic state is just a big function that return the same value for the same parameters. In React you do have state that is stored in React instance itself, every time that you use setState React saves that value for future renders. it's holding the state for you.

As for MobX, you have to create an instance of an observable object and provide access to it to your components, so they can change it/interact with it.

The best practice for this, is to create an object instance out of a class and provide that instance to your components via the context api. (Read about it, if you don't know how to use it)

You CAN create a simple JavaScript object and make it observable using makeObservable(obj), but again. the best practice is to create a class and in the constructor call makeObservable(this).

Here's an example for a simple class Store:

class AgeStore {
  @observable age: number = 12;

  constructor() {
    makeObservable(this);
  }

  @action
  grow() {
    this.age++;
  }
}

And this is how you would initialize your React app (You should split this to several files):


const ageStore = new AgeStore();
const AppContext = createContext(null);

export function useAgeStore() {
  return useContext(AppContext);
}

ReactDOM.render(
  <AppContext.Provider value={ageStore}>
    <App />,
  </AppContext.Provider>
  document.getElementById('app'),
);

And this is how your functional components should use the store:

export const DemoComp: React.FC = observer(function DemoComp() {
  const ageStore = useAgeStore();

  return <div>
    <div>The current Age is:{ageStore.age}</div>
    <button onClick={ageStore.grow()}>Grow</button>
  </div>;
});

Upvotes: 1

Related Questions