Reim
Github
2.0.0
2.0.0
  • Reim.js
  • Introduction
    • Motivation
    • Concepts
  • Guide
    • Store
    • setState
    • Subscribe
    • Plugin
    • Event Emitter
    • Use with React / Preact
    • Use with Vue
    • Use with Angular / Rxjs
  • Ecosystem
    • react-reim
    • reim-task
    • reim-reporter
    • reim-persist
    • Release Notes
Powered by GitBook
On this page
  • Makes state dead simple ;)
  • Features
  • Installation
  • How Reim looks
  • Contributing
  • License

Reim.js

NextMotivation

Last updated 6 years ago

Makes state dead simple ;)

Features

  • 📏 All possible ways to use state in one: Unstated, React Hook, Redux, React-Values...

  • 🔐 Immutable state

  • ⚡ Small, 6kb gzip + minified

  • 🌟 Typing support for Typescript & Flow

Installation

$ yarn add reim react-reim

How Reim looks

"Hook" (React 16.7.0-alpha2+)

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>
  )
}

"Unstated"

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

const Toggle = () => (
  <State
    initial={false}
    actions={{toggle: () => state => !state}}
    onChange={console.log}
  >
    {(visible, {toggle}) => (
      <button onClick={toggle}>{visible}</button>
    )}
  </State>
)

"Redux"-like

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

// create a store
const counter = reim({count: 10})

// create a presentational component
const Counter = ({visible, increment, decrement}) => (
  <div>
    <button onClick={decrement}>-</button>
    <div>{value}</div>
    <button onClick={increment}>+</button>
  </div>
)

// create a container component
const ConnectedCounter = witReim(
    store
    /* Filter */({first, last}) => ({full: `${first} ${last}`}),
    /* Actions */ {increment: amount => state => void (state.count += amount)}
)(Counter)

export default ConnectedCounter

Contributing

License

🤟 Update state by simply mutating it, thanks to

⚛ Supports

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

MIT ©

immer
Redux Dev Tools
CONTRIBUTING.md
IniZio