​
State Management

Solana App Kit provides a comprehensive state management solution using Redux Toolkit. Our state modules are designed to be modular, allowing you to import only what you need.

​
Auth State

The auth state slice handles user authentication, profiles, and session management.

​
Structure

interface AuthState {
  isLoggedIn: boolean;
  user: {
    id?: string;
    username?: string;
    profilePicture?: string;
    walletAddress?: string;
    // other user properties
  };
  loading: boolean;
  error: string | null;
}

​
Key Functions

  • loginSuccess - Updates state after successful authentication
  • logoutSuccess - Clears user data on logout
  • fetchUserProfile - Async thunk for retrieving user profile data
  • updateUsername - Updates the user’s username in the database
  • updateProfilePic - Updates the user’s profile picture

​
Usage

import { useDispatch, useSelector } from 'react-redux';
import { 
  loginSuccess, 
  logoutSuccess, 
  updateUsername, 
  updateProfilePic 
} from 'solana-app-kit';

// In your component
const dispatch = useDispatch();
const { user, isLoggedIn } = useSelector(state => state.auth);

// Update username
const changeUsername = () => {
  dispatch(updateUsername({ 
    userId: user.id, 
    newUsername: 'newUsername' 
  }));
};

// Update profile picture
const changeProfilePic = (imageUrl) => {
  dispatch(updateProfilePic(imageUrl));
};

​
Other State Slices

  • Thread State - Manages social posting, comments, and engagement
  • Transaction State - Handles pending and completed blockchain transactions
  • Wallet State - Manages wallet connections and token balances
See individual state module documentation for more details on each slice.