microstate
Co-located, functional state management for React. seState
syntatic sugar.
Usage
Wrap your application with the Provider
.
const App = <Provider> <h1>My App</h1> </Provider>
Connect your component to the provider state using connect
. The function signature for connect looks like this:
connect(mapStateToProps[, mapDispatchToProps, initialState])(MyComp)
const initialState = count: 0 const mapStateToProps = count: statecount const mapDispatchToProps = const Component = <div> <button onClick=inc>Increment</button> <span>count</span> </div> mapStateToProps mapDispatchToProps initialStateComponent
Then render your component within the Provider context.
const App = <Provider> <Component/> </Provider>
Note: the state is availabe at a component level and below during first render. However, since an initial render is required to evaluate the connect
function, state will only be availabe at the application level after that first render.
Subscribing to state
Subscribing to another component's state is easy. Let's pretend the below is a different component than the counter above.
// Output.js count: statecount text: statetext null text: 'The count is' <div>text + ' ' + count</div>
Then add it to the rendered App
from above.
<Provider> <Component/> <Output/> </Provider>
MIT License