Reim ·

:thinking: Why another state library?

• :metal: Update state by simply mutating it, thanks to immer
• :closed_lock_with_key: Immutable state
• :zap: Small, 6kb gzip + minified
• :star2: Typing support for Typescript & Flow
• :atom_symbol: Supports Redux Dev Tools

:book: 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, {
    actions: {
      increment: () => state => state++,
      decrement: () => state => state--
    }
  })

  return (



      <button onClick={increment}>+</button>


{count}





  )
}

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]

:heart: Contributing

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

:page_with_curl: License

MIT © IniZio