Cross-Platform State Management: Redux, Riverpod, and MobX
TL;DR: This guide covers state management solutions for cross-platform mobile apps. Compare Redux, Riverpod, MobX, and learn which fits your project.
State Management Options
| Solution | Type | Learning Curve | Boilerplate |
|---|---|---|---|
| Redux | Predictable state | Medium | High |
| MobX | Reactive | Low | Low |
| Riverpod | Reactive | Low | Minimal |
| Context | Built-in | Easy | Minimal |
| Zustand | Simple | Easy | Minimal |
Redux in React Native
// Store setup
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {
user: userSlice,
cart: cartSlice,
},
});
// Usage
const UserScreen = () => {
const user = useSelector(state => state.user);
const dispatch = useDispatch();
return (
<Button
title="Logout"
onPress={() => dispatch(logout())}
/>
);
};
MobX in React Native
import { makeAutoObservable } from 'mobx';
class UserStore {
user = null;
isLoading = false;
constructor() {
makeAutoObservable(this);
}
async login(credentials) {
this.isLoading = true;
this.user = await api.login(credentials);
this.isLoading = false;
}
}
Riverpod in Flutter
// Provider definition
final userProvider = StateNotifierProvider<UserNotifier, User?>((ref) {
return UserNotifier();
});
class UserNotifier extends StateNotifier<User?> {
UserNotifier() : super(null);
Future<void> login(Credentials credentials) async {
state = await api.login(credentials);
}
}
// Usage
class UserScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final user = ref.watch(userProvider);
return Text(user?.name ?? 'Not logged in');
}
}
Conclusion
Choose based on team and project:
- Redux - Large apps, predictability
- MobX - React Native, simplicity
- Riverpod - Flutter, minimal code
Comments