Make state easy with Reim
Why Reim?
- 💪 Can scale from HOC to Redux-level
- ❄️ Immutable state
- ⚡ Small, just 8kb minified
- 📖 Nice Documentation
Installation
$ yarn add reim react-reimHow Reim looks
"Minimal"
import React from 'react'
import reim from 'reim'
import {context} from 'react-reim'
// create a store
const {get, set} = reim({name: 'Peter'}).plugin(context())
// get state already :)
const User = () => (
<div>{get(s => s.name)}</div>
)
// oh and setting state :D
const App = () => (
<div>
<User/>
{get(s => (
<input
value={s.name}
onChange={ev => set({name: ev.target.value})}
/>
))}
</div>
)"Unstated"-like
import React from 'react'
import reim from 'reim'
import {context} from 'react-reim'
// create a store
const store = reim({visible: true}).plugin(context())
// use our component 8)
const App = () => (
<store.Consumer>
{s => (
<div>
<h1>{s.visible ? 'ON' : 'OFF'}</h1>
<button onClick={store.set({visible: s.visible})}>Toggle</button>
</div>
))}
</store.Consumer>
)"Redux"-like
import React from 'react'
import reim from 'reim'
import {connect} from 'react-reim'
// create a store
const counter = reim({count: 10})
// create a presentational component
const Counter = ({value, increment, decrement}) => (
<div style={styles.container}>
<button onClick={decrement}>-</button>
<div style={styles.counter}>{value}</div>
<button onClick={increment}>+</button>
</div>
)
// create a container component
const ConnectedCounter = connect(
counter,
({count}) => ({value: count}),
({set}) => ({
increment: () => set(state => {
state.count++
}),
decrement: () => set(state => {
state.count--
})
})
)(Counter)
export default ConnectedCounter