Sky Instance

The Sky instance provides direct, synchronous access to your store outside of React components.

Getting Sky Instance

import { create } from 'storken'

const [useStorken, get, set, sky] = create({
  initialValues: {
    count: 0,
    user: null
  }
})

// sky is the Sky instance

Methods

sky.get(key)

Get the current value of a state synchronously.

const currentCount = sky.get('count')
console.log('Current count:', currentCount)

// Use in event handlers
button.addEventListener('click', () => {
  const count = sky.get('count')
  console.log('Clicked at count:', count)
})

sky.set(key, value)

Set state value synchronously. Supports both direct values and updater functions.

// Direct value
sky.set('count', 10)

// Updater function
sky.set('count', (prev) => prev + 1)

// Complex state
sky.set('user', {
  id: '123',
  name: 'John Doe',
  email: 'john@example.com'
})

sky.reset(key)

Reset state to its initial value.

// Reset single state
sky.reset('count')

// Reset multiple states
['count', 'user', 'theme'].forEach(key => {
  sky.reset(key)
})

sky.subscribe(key, callback)

Subscribe to state changes. Returns an unsubscribe function.

// Subscribe to changes
const unsubscribe = sky.subscribe('count', (value) => {
  console.log('Count changed to:', value)
  document.title = `Count: ${value}`
})

// Later, unsubscribe
unsubscribe()

// Subscribe with cleanup
useEffect(() => {
  const unsub = sky.subscribe('theme', (theme) => {
    document.body.className = theme
  })
  
  return unsub // Cleanup on unmount
}, [])

sky.getStore(key)

Get the Storken instance for a specific key.

const countStore = sky.getStore('count')

// Access store methods
countStore.get()    // Get value
countStore.set(5)   // Set value
countStore.reset()  // Reset to initial

Use Cases

Non-React Contexts

// In utility functions
export function incrementCounter() {
  const current = sky.get('count')
  sky.set('count', current + 1)
}

// In event handlers
document.getElementById('btn').onclick = () => {
  sky.set('modalOpen', true)
}

// In WebSocket handlers
ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  sky.set('messages', (prev) => [...prev, data])
}

Global Actions

// Auth utilities
export const auth = {
  login: async (credentials) => {
    sky.set('loading', true)
    try {
      const user = await api.login(credentials)
      sky.set('user', user)
      sky.set('isAuthenticated', true)
      return user
    } finally {
      sky.set('loading', false)
    }
  },
  
  logout: () => {
    sky.reset('user')
    sky.set('isAuthenticated', false)
    // Clear all user data
    ['profile', 'settings', 'preferences'].forEach(key => {
      sky.reset(key)
    })
  }
}

DevTools Integration

// Expose to browser console for debugging
if (process.env.NODE_ENV === 'development') {
  window.storken = {
    sky,
    get: (key) => sky.get(key),
    set: (key, value) => sky.set(key, value),
    reset: (key) => sky.reset(key),
    inspect: () => {
      const state = {}
      // Get all state values
      ;['user', 'theme', 'count'].forEach(key => {
        state[key] = sky.get(key)
      })
      console.table(state)
    }
  }
}

⚠️ Important Notes

• Sky operations are synchronous
• Changes made via Sky will trigger React re-renders
• Sky is shared across all components using the same store
• Avoid using Sky inside React components - use hooks instead