oleystack / state Goto Github PK

import { useState } from 'react'
import { state } from '@bit-about/state'

// 1️⃣ Create a hook-based store
const [Provider, useStore] = state(() => {
  const [alice, setAlice] = useState('Alice')
  const [bob, setBob] = useState('Bob')
  
  return { alice, setAlice, bob, setBob }
})

// 2️⃣ Wrap tree with Provider
const App = () => (
  <Provider>
    <Child />
  </Provider>
)

// 3️⃣ Use the selector hook in component
const Child = () => {
  const alice = useStore(state => state.alice)
  
  return <p>{alice}</p>
}

// 👍 Re-render when anything changed
const { alice, bob } = useStore()

// 💪 Re-render when alice changed
const alice = useStore(state => state.alice)

// 🤌 Re-render when alice or bob changed
const [alice, bob] = useStore(state => [state.alice, state.bob])

// or
const { alice, bob } = useStore( 
  state => ({ alice: state.alice, bob: state.bob }) 
)

const [Provider, useStore, store] = state(/* ... */)

// 👍 Get whole state
const { alice } = store.get()

// 💪 Get substate
const alice = store
  .select(state => state.alice)
  .get()

// 🤌 Subscribe to the store and listen for changes
const subscription = store
  .select(state => state.alice)
  .subscribe(alice => console.log(alice))
  
// remember to unsubscribe!
subscription.unsubscribe()

import { useState } from 'react'
import { getUserById } from '../utils'

const [UserProvider, useUser] = state(props => {
  const [user] = useState(() => getUserById(props.id))
  return user
})

const UserProfile = () => (
  <UserProvider id={2137}>
    {/* ... */}
  </UserProvider>
)

import { useState, useCallback } from 'react'

const [Provider, useStore] = state(() => {
  const [counter, setCounter] = useState(0);
   
  // ✖️ It will re-render components every time
  // const incrementCounter = () => setCounter(value => value + 1)

  const incrementCounter = useCallback(
    () => setCounter(value => value + 1),
    [setCounter]
  )

  return { counter, incrementCounter }
})

import { useState } from 'react'
import { state } from '@bit-about/state'
import { useEvent } from './auth-events' // @bit-about/event hook
import User from '../models/user'

const [UserProvider, useUser] = state(() => {
  const [user, setUser] = useState<User | null>(null)
    
  useEvent({
    userLogged: (user: User) => setUser(user),
    userLoggout: () => setUser(null)
  })
    
  return user
})

import { useQuery } from 'react-query'
import { fetchUser } from './user'

const useUserQuery = (id) => useQuery(['user', id], () => fetchUser(id))

const [UserProvider, useUser] = state(props => {
  const { data: user } = useUserQuery(props.id)
  return user
})

const UserProfile = () => (
  <UserProvider id={2137}>
    {/* ... */}
  </UserProvider>
)

// 🧠 Re-render ONLY when user avatar changed (no matter if isLoading changes)
const avatar = useUser(state => state.user.avatar)