Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

hugestore

1.1.0 • Public • Published

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)

install

npm i hugestore

Downloadsweekly downloads

5

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability