store-up v1.1.1

Yet another state management tool

• Simple - No need for reducers, action creators, dispatchers or other frightful concepts.
• Recursive - Not only main state object has Update function, that triggers re-rendering of components, but also any inner object property.
• Debugable - You can simply log/get current state or hole state change history to debug your project.

Instalation

npm

npm i store-up

yarn

yar add store-up

Usage

First, include the state manager in your code

import Up from 'store-up'

Up is a function, that takes two parameters: initial state and a function, that takes the current state and render components basing on that state (store)

Up(
    {counter: 0, options: {step: 1}},
    store => {
    document.body.innerHTML = `
    	<div>
        	<h1>Count: ${store.counter}</h1>
        </div>
    `
    }
)

To change current state, we should call method "up", and pass object with needed changes

store.up({counter: store.counter + store.options.step})

It will automatically update the state and recall function, passed as the second parameter to Up function, with updated state (store)

If your state has an object as any nested parameter, that object is also updatable

store.options.up({step: 2})

Example

Here I used functional approach, to make it more concise

import React from 'react'
import ReactDOM from 'react-dom'

import Up from 'store-up'

const increment = store => store.up({counter: store.counter + 1})

const Label = store => <h1>Counter: {store.counter}</h1>

const Btn = store => <button onClick={() => increment(store)}>Plus</button>

const Main = store => <div>
    {Label(store)}
    {Btn(store)}
</div>

Up(
    {counter: 0},
    store => {
        ReactDOM.render(
            Main(store),
            document.querySelector("#app")
        )
    }
)

History

If you want to console.log history of state changes or only last state, you can pass two additional parameters to imported Up function.

Up(initialState, function callback[, withHistory, log])

The third parameter decides whether to keep hole history or only the last one (false by default)

The fourth parameter decides whether or not to console.log the history or the last state (false by default)

So if we call Up function in the example above like this

Up(
    store,
    store => render(store),
    true,
    true
)

On every click it will console.log something like

**click** //logs [{counter: 1}]
**click** //logs [{counter: 1}, {counter: 2}] etc

If instead of logging you want to manually handle the history array, you can call getHistory method, to get it.

store.getHistory()