Reim.js

: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 (
    <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]

: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