Setting up MobX Architecture for React Native Applications
MobX is a reactive state manager based on observable values. Instead of dispatching actions and reducers — direct mutations of observable properties, automatically tracked by React components. With mobx-react-lite and MobX 6 decorators, code becomes compact: minimal wrappers, maximum readability.
MobX Store in Practice
import { makeAutoObservable, runInAction } from 'mobx';
class ProfileStore {
profile: UserProfile | null = null;
isLoading = false;
error: string | null = null;
constructor(private userRepository: UserRepository) {
makeAutoObservable(this);
}
async loadProfile(userId: string) {
this.isLoading = true;
this.error = null;
try {
const profile = await this.userRepository.getProfile(userId);
runInAction(() => {
this.profile = profile;
this.isLoading = false;
});
} catch (e) {
runInAction(() => {
this.error = (e as Error).message;
this.isLoading = false;
});
}
}
get displayName() {
return this.profile ? `${this.profile.firstName} ${this.profile.lastName}` : '';
}
}
makeAutoObservable automatically marks fields as observable, methods as action, getters as computed. runInAction is needed for mutations after await — without it MobX warns in strict mode.
In component:
const ProfileScreen = observer(({ userId }: { userId: string }) => {
const { profileStore } = useStores();
useEffect(() => { profileStore.loadProfile(userId); }, [userId]);
if (profileStore.isLoading) return <ActivityIndicator />;
if (profileStore.error) return <ErrorView message={profileStore.error} />;
return <ProfileView name={profileStore.displayName} />;
});
observer() from mobx-react-lite makes component reactive: rerender only on used observable properties change.
Context for DI
Pass stores via React Context without Provider chaos:
const StoreContext = createContext<RootStore | null>(null);
export const useStores = () => useContext(StoreContext)!;
// In App.tsx
const rootStore = new RootStore();
<StoreContext.Provider value={rootStore}>
<AppNavigator />
</StoreContext.Provider>
RootStore creates all stores and passes dependencies between them.
Main Argument for MobX
Compared to Redux — two to three times less code for same functionality. No actionTypes, no mapStateToProps, no store normalization. For teams that value development speed over strictness — MobX wins.
Argument against: less predictability. Mutations happen directly, without explicit action log. For debugging, attach mobx-react-devtools or mobx-logger.
What We Configure
RootStore with dependency injection. StoreContext + useStores hook. Basic Store template with makeAutoObservable. Setup of mobx + mobx-react-lite + Babel plugin for decorators (if legacy syntax needed). Tests via Jest without React — pure unit tests of store logic.
Timeline
Setting up MobX architecture from scratch: 2–3 days. Cost — after requirements analysis.