React store

Fully typed react reactive stores. Stores are simple with native feel. No Providers, no weird store structure.

Install

npm i rastore

Store file

export const count = writable(0)

Increment component file

export default function Increment() {
  const [count, update] = useStore(counter)
  return <button onClick={() => update(val => val + 1)}>Increment</button>
}

App component

On every click in Increment component, App components will automatically rerender count

export default function App() {
  const [count, update] = useStore(counter)

  return (
    <div className="App">
      count: {count}
      <Increment />
    </div>
  )
}

Readable

Can by modified only by setter function that is defined on init

On every second readable store will call subscribers

This store cannot be set or update outside the setter function scope

export const time = readable(0, (set) => {
  const interval = setInterval(() => set(value => value + 1), 1000)

  return () => {
    clearInterval(interval) // cleanup function, triggered after the last subscriber was removed
  }
})

Readable and Derived doesn't have the setter in useStore

export default function App() {
  const seconds = useStore(timer)

  return (
    <div className="App">
      seconds from start: {seconds}s
    </div>
  )
}

Writable

Can by modified whethever you want

This store can be updated in any part of application and changes will call subscribers

export const count = writable(0)

Derived

Readable like store that is derived by another store

If count store will change, double store will change too and will call subscribers as well as count

export const count = writable(0)
export const double = derived(count, $count => $count * 2)

Subscribe changes

export const count = writable(0)

count.subscribe(currentValue => console.log(currentValue))

Update and set new value in writable

Both these operations will call subscribers

export const count = writable(0)

count.set(1) // set new value

count.update(currentValue => currentValue + 1) // update current value

How to use

For example you can use writable store as currently logged in user, components will react on any changes over the application.

export const user = writable({
  name: '',
  email: '',
  isLoggedIn: false,
})