hugestore v1.1.0

Huge Store

Huge Store is a simple and powerfull store for using in react applications.

Installation

npm install --save hugestore

Features

This module has three functions:

• The first is connector that gets component instance(this) as first argument and connects component to store by getting statekey as second argument and storekey path as third argument for single connection, And for multiple connection that gets second argument as object (key: statekey, value: storekey path). For ES can use with react-mixin module easily.

• The second is setData. This function gets two arguments for single connections setting data (1: storekeyPath, 2: data) and for setting data in multiple connections it gets one argument as object (key: storekeyPath, value: data).

• And the last is getData that returns data by getting storekeyPath as argument. this function will return undefined for unregistered data. (e.g. getData('one.two.three.four.five.six'))

More features and documents will come soon in new releases.

Example

import axios from 'axios'
import { connector, setData } from 'hugestore'
import React from 'react'
import { render } from 'react-dom'

var Application = React.createClass({

    mixins: [
        connector(this, {
            'viewer': 'users.current',
            'permissions': 'permissions'
        })
    ],

    componentDidMount: () => {
        axios.all([axios.get('/users/current'), axios.get('/acl')])
            .then(axios.spread((viewer, permissions) => {
                setData({
                    'users.current': viewer.json(),
                    'permissions': permissions.json()
                })
            }))
    },

    render: () => {
        var { viewer, permissions } = this.state

        if (viewer == null && permissions == null) {
            return <div>loading ...</div>
        }

        if (viewer.role == permissions.posts.read) {
            return <Posts />
        }

        return <div>403</div>
    }
})

var Posts = React.createClass({
    
    mixins: [
        mountstatus(this),
        connector(this, 'posts', 'posts.index')
    ],

    componentDidMount: () => {
        axios.get('/posts')
            .then((posts) => {
                setData('posts.index', posts.json())
            })
    },

    render: () => {
        var { posts } = this.state

        if (posts == null) {
            return <div>loading ...</div>
        }

        return <div>render posts :)</div>
    }
})

render(<Application />, element)