Handling Asynchronous Actions with MobX in React

Managing asynchronous operations like API calls can be tricky in React applications. But with MobX, it becomes surprisingly straightforward! Let’s dive into how we can handle async actions elegantly while keeping our state management clean and predictable.

Understanding MobX Actions and Observables

Before we jump into async operations, let’s quickly refresh our understanding of MobX basics. MobX uses observables to track state changes and automatically updates your React components when needed. Think of it as a smart system that knows exactly when to re-render your UI.

import { makeObservable, observable, action } from 'mobx';

class TodoStore {
  todos = [];
  isLoading = false;

  constructor() {
    makeObservable(this, {
      todos: observable,
      isLoading: observable,
      fetchTodos: action
    });
  }
}

Implementing Async Actions

The real magic happens when we implement async actions. Here’s a practical example of fetching todos from an API:

class TodoStore {
  // ... previous code ...

  async fetchTodos() {
    this.isLoading = true;
    try {
      const response = await fetch('https://api.example.com/todos');
      const data = await response.json();
      runInAction(() => {
        this.todos = data;
        this.isLoading = false;
      });
    } catch (error) {
      runInAction(() => {
        this.error = error;
        this.isLoading = false;
      });
    }
  }
}

Using Async Actions in Components

Now let’s see how to use these async actions in your React components:

const TodoList = observer(() => {
  const { todoStore } = useStores();

  useEffect(() => {
    todoStore.fetchTodos();
  }, []);

  if (todoStore.isLoading) return <div>Loading...</div>;

  return (
    <ul>
      {todoStore.todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
});

Best Practices and Error Handling

Remember to always handle potential errors in your async operations. MobX makes this easy by allowing you to track error states just like any other observable:

async updateTodo(id, updates) {
  this.isLoading = true;
  try {
    await api.updateTodo(id, updates);
    runInAction(() => {
      const todo = this.todos.find(t => t.id === id);
      Object.assign(todo, updates);
    });
  } catch (error) {
    this.error = error;
  } finally {
    runInAction(() => {
      this.isLoading = false;
    });
  }
}

Conclusion

MobX’s elegant handling of async actions makes it a powerful choice for React applications. By combining observables, actions, and proper error handling, you can create robust and maintainable applications that handle complex async operations with ease.