React Native State Management: From Context to Redux

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

function LoginScreen() {
  const { login } = useAuth();

  return (
    <Button title="Login" onPress={() => login({ name: 'John' })} />
  );
}

npm install @reduxjs/toolkit react-redux

import { configureStore, createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: { user: null, isAuthenticated: false },
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.user = null;
      state.isAuthenticated = false;
    },
  },
});

export const { login, logout } = authSlice.actions;

const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
  },
});

import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      {/* Your app */}
    </Provider>
  );
}

import { useSelector, useDispatch } from 'react-redux';

function ProfileScreen() {
  const { user } = useSelector((state) => state.auth);
  const dispatch = useDispatch();

  return (
    <View>
      <Text>{user?.name}</Text>
      <Button
        title="Logout"
        onPress={() => dispatch(logout())}
      />
    </View>
  );
}

npm install zustand

import create from 'zustand';

const useAuthStore = create((set) => ({
  user: null,
  isAuthenticated: false,
  login: (user) => set({ user, isAuthenticated: true }),
  logout: () => set({ user: null, isAuthenticated: false }),
}));

function LoginScreen() {
  const { login } = useAuthStore();

  return (
    <Button
      title="Login"
      onPress={() => login({ name: 'John' })}
    />
  );
}

import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
});

const persistor = persistStore(store);