A tiny and unobtrusive state management library for React and Preact apps
The current size of statty/dist/statty.umd.min.js
is:
Most of the time I see colleagues of mine starting React projects setting up Redux + a bunch of middlewares and store enhancers by default, regardless of the project nature.
Despite Redux is awesome, it's not always needed and it may slow down the process of onboarding new developers, especially if they are new to React and its ecosystem (I often saw colleagues being stuck for hours trying to understand what was the proper way to submit a simple form).
React already comes with a built-in state management mechanism, and the way to change state is called setState()
. Local component state is just fine in most of the cases.
In real world apps we often have app state, and sometimes it becomes annoying to pass it down the entire component tree, along with callbacks to update it, via props.
Statty
is meant to be used to manage app-wide state and you can think of it as a simpliefied version of Redux.
It safely leverages context to expose application state to children, along with a function to update it when needed.
The update function acts like Redux dispatch, but instead of an action, it take an updater
function as a parameter that returns the new state.
This way it's easy to write testable updaters and to organize them as you prefer, without having to write boilerplate.
This project uses node and npm. Go check them out if you don't have them locally installed.
$ npm i statty
Then with a module bundler like rollup or webpack, use as you would anything else:
// using ES6 modules
import statty from 'statty'
// using CommonJS modules
var statty = require('statty')
The UMD build is also available on unpkg:
<script src="https://unpkg.com/statty/dist/statty.umd.js"></script>
You can find the library on window.statty
.
import React from 'react'
import { render } from 'react-dom'
import { Provider, State } from 'statty'
// selector
const selector = state => ({ count: state.count })
// updaters
// only returns the slice of the state supposed to be updated
// new state will be shallowly merged with old state
const dec = state => ({ count: state.count - 1 })
// returns a complete new state
const inc = state => Object.assign({}, state, {count: state.count + 1 })
const Counter = () =>
<State
select={selector}
render={(state, update) =>
<div>
<button onClick={() => update(dec)}>-</button>
{state.count}
<button onClick={() => update(inc)}>+</button>
</div>}
/>
// initial state
const initialState = {
count: 0
}
const App = () =>
<Provider state={initialState}>
<Counter />
</Provider>
render(<App />, document.getElementById('root'))
The <Provider>
component is used to shared the state via context.
The <State>
component takes 2 props:
select
is a function that takes the entire state, and returns only the part of it that the children will needrender
is a render prop that takes theselected state
and theupdate
function as parameters, giving the user full control on what to render based on props and state.
State updates happen via special updater
functions that take the old state as a parameter and return the new state, triggering a rerender.
An updater function may return the slice of the state that changed or an entire new state. In the first case the new slice will be shallowly merged with old state.
Makes state available to children <State>
object
| required
The initial state
function(oldState: object, newState: object, updaterFn: function)
Use the inspect prop during development to track state changes.
Statty
comes with a default logger inspired by redux-logger.
<Provider
state={{count: 0}}
inspect={require('statty/inspect')}
/>
Connects children to state changes, and provides them with the update
function
function(state: object) | defaults to s => s | returns object
Selects the slice of the state needed by the children components.
function(state: object, update: function)
| required
A render prop that takes the state returned by the selector
and an update
function.
For the moment the only example available is hosted on codesandbox.
It shows simple and more advanced examples with async state mutations.
More to come.
If you would like to add an example, follow these steps:
- fork this codesandbox
- Make sure your version (under dependencies) is the latest available version.
- Update the title and description
- Update the code for your example (add some form of documentation to explain what it is)
- Add the tag: statty:example
- Michael Jackson's post on render props
- refunk
$ npm run test