Forget about actions, connections, reducers and a lot of boilerplate to create and manage states. With reworm you can create and manage state as simple as on the image above.
Install reworm using your package manager
$ yarn add rewormThen just create your new state and use it!
import React from 'react'
import { create } from 'reworm'
const { get } = create({ name: 'John' })
const App = () => (
<div>{get(s => s.name)}</div>
)Instead of defining actions or something else to change your state, with reworm you just need to use the set method like that:
import React from 'react'
import { create } from 'reworm'
const { set, get } = create({ name: 'John' })
class App extends React.Component {
componentDidMount() {
set(prev => ({ name: 'Peter' + prev.name }))
}
render() {
return (
<div>{get(s => s.name)}</div>
)
}
}Selectors are good because they prevent you from duplicating code. With it you can just create some functions and use them throughout your application.
import React from 'react'
import { create } from 'reworm'
const { select } = create({ list: ['Peter', 'John'] })
const johnSelector = select(state =>
state.list.find(user => user.includes('John'))
)
const App = () => (
<div>{johnSelector(user => user)}</div>
)Create a new state
Use this method to access your state
Use this method to set your state
Create selectors that can be used with your state and avoid repeating code.
import React from 'react'
import { create } from 'reworm'
const { select } = create({ name: 'John' })
const userSelector = select(s => s.name)
const App = () => (
<div>{userSelector(name => name)}</div>
)interface ProviderProps<T> {
initial?: T
}
type PrevState<T> = (prevState: T) => T
type GetFn<T> = (state: T) => React.ReactNode
interface State<T> {
get: (fn: GetFn<T>) => React.ReactNode
set: (param: T | PrevState<T>) => void
select: <S = any>(selector: (state: T) => S) => (fn: GetFn<S>) => React.ReactNode
}
function create<T>(initial: T) => State<T>If you want to contribute to this project, please see our Contributing Guide !