agestor

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)