agestor

A dead simple 1.3kb store for React

Install

# yarn 
yarn add agestor
 
# npm 
npm i agestor

Usage

Create store

// App.js
import React from 'react'
import createStore from 'agestor/createStore'
 
const initialValue = {
    luckyNumber: 15,
    capital: { colorado: 'Denver' }
}
 
const App = () => <h1>My App</h1>
 
export default createStore(App, initialValue)

You can pass the initial store value as the second argumento of the function createStore

Connect a component to the store

Using props.store.get('key')

// MyComponent
import React from 'react'
import withStore from 'agestor/withStore'
 
const MyComponent = ({ store }) => (
    <p>Lucky number: {store.get('luckyNumber')}</p>
    // You can also get nested values
    <p>The capital of colorado is: {store.get('capital')[colorado]}</p>
)
 
export default withStore(MyComponent)

Set data in store

const { store } = props
store.set({ key: 'value' })
store.set({ anotherKey: { name: 'AnotherValue' } })

Read data from the store

const { store } = props
const exampleKey = store.get('exampleKey')
 
const defaultValue = { name : 'an optional default value if the key is not found' }
const another_key = store.get('another_key', defaultValue)

Remove data from the store

const { store } = props
store.remove('a_key')

Get all data from the store

// All your data in on the store variable
const { store } = props

Set multiple data in one shot

Using an object with the key and the value properties: { key: 'key', value: theValue }

const { store } = props
const firstObject = { key: 'key-one', value: 'value-one' }
const secondObject = { key: 'key-two', value: 'value-two' }
store.setAll(firstObject, secondObject)

Configuration

When creating the store with createStore you can pass the store initial value:

const initialValue = {
    someKey : 'some value',
    anotherKey : {
        name : 'my initial value'
    }
}
 
export default createStore(App, initialValue)