Reim ·

🤔 Why another state library?

• 🤘 Update state by simply mutating it, thanks to immer
• 🔐 Immutable state
• ⚡️ Small, 6kb gzip + minified
• 🌟 Typing support for Typescript & Flow
• ⚛️ Supports Redux Dev Tools

📖 How to use

$ yarn add reim react-reim

Then use useReim just like other React hooks :

import React from 'react'
import reim from 'reim'
import {useReim} from 'react-reim'

function Counter() {
  const [count, {increment}] = useReim(10, {
    increment: () => state => state++,
    decrement: () => state => state--
  })

  return (
    <div>
      <button onClick={increment}>+</button>
      <div id="count">{count}</div>
    </div>
  )
}

or use <State/> for some cases:

import React from 'react'
import reim from 'reim'
import {State} from 'react-reim'

const Toggle = () => (
  <State
    initial={false}
    actions={{toggle: () => state => !state}}
  >
    {(visible, {toggle}) => (
      <button onClick={toggle}>{visible ? 'On' : 'Off'}</button>
    )}
  </State>
)

Table of Contents

• reim
  • reim()
    • filter()
    • subscribe()
  • reim.snapshot
  • reim.stringify
  • reim.preload
• react-reim
  • <State/>
    • initial
    • store
    • actions
    • filter
  • useReim()

reim

^{↑ Back to top}

reim(state | store, {actions?: Actions, name?: string})

^{↑ Back to top}

Returns a new Reim store.

An action is simple a function that returns a state updater.

For example:

const store = reim({count: 10}, {
  actions: {
    add: amount => state => {state.count += amount}
  }
})

Then just use it as a method:

// before: {count: 10}

store.add(5)

// after: {count: 15}

filter(getter: {[name]: state => any} | state => any | keyof typeof state)

Gets current snapshot of store

subscribe(fn, {filter})

fn gets called on change. You can unsubscribe(fn) to stop subscription.

reim.snapshot()

^{↑ Back to top}

Returns snapshot of all stores created

reim({abc: 133})

reim.snapshot() // -> {0: {abc: 133}}

reim.stringify()

^{↑ Back to top}

Returns JSON.stringify-ed snapshot of all stores created, safe for injecting

reim.preload(snapshot)

^{↑ Back to top}

Used in client side for preloading states

// Server side:
`<script>window.__PRELOAD_STATE__ = ${reim.stringify()}</script>`

// Client side:
reim.preload(window.__PRELOAD_STATE__)

react-reim

^{↑ Back to top}

<State/>

^{↑ Back to top}

initial

^{↑ Back to top}

Initial value of the store. The store is resets if initial value is changed.

store

^{↑ Back to top}

Receives a Reim store, initial is ignored if store is provided

actions

^{↑ Back to top}

Same as actions in reim()

filter

^{↑ Back to top}

Same as filter in reim()

useReim(store | state, {filter, actions})

Returns [snapshot, actions]

❤️ Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

📃 License

MIT © IniZio