Skip to content
State container for JavaScript application, and React
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo version 1.1.0 Dec 4, 2019
docs feat: remove getStore params Dec 15, 2019
src feat: remove getStore params Dec 15, 2019
test feat: disable set initial store empty, refactor: dispatch warning Apr 12, 2019
.babelrc test: add test Feb 27, 2019
.editorconfig eslint Feb 27, 2019
.eslintignore test: travis Feb 28, 2019
.eslintrc eslint Feb 27, 2019
.gitignore chore: build Feb 28, 2019
.travis.yml test: travis Feb 28, 2019
CHANGELOG.md feat: remove getStore params Dec 15, 2019
LICENSE init Feb 26, 2019
README.md feat: remove getStore params Dec 15, 2019
falco.config.js version 1.1.0 Dec 4, 2019
package.json feat: remove getStore params Dec 15, 2019

README.md

nycticorax

Build Status codecov

state container for JavaScript application, and React

Install

$ npm i nycticorax

Usage

for React, it is simple use, not Provider, reducer, action, only connect

demo | counter | counter(strict mode)

import React, { Component } from 'react'
import { connect } from 'nycticorax'

class A extends Component {
  onClick = () => {
    this.props.dispatch({ 'name': 1 }) // update
  }

  render() {
    const { name } = this.props // props
    return (
      <div>
        <p>{name}</p>
        <button onClick={this.onClick}>set</button>
      </div>
    )
  }
}

export default connect('name')(A) // connect

specified instance

import React from 'react'
import Nycticorax from 'nycticorax'

const { createStore, connect } = new Nycticorax()

createStore({ name: 1 })

function X({ dispatch, name }) {
  return (
    <div>
      <h2>Component X </h2>
      <p>name: {name}</p>
      <button onClick={() => dispatch({ name: 2 })}>set name</button>
    </div>
  )
}

export default connect('name')(X)

API

you can use nycticorax without React

import {
  dispatch,
  createStore,
  getStore,
  subscribe,
  connect,
} from 'nycticorax'

createStore

create initial store

createStore({ name: 'nycticorax' })

getStore

get store data

const store = getStore() // { name: 'nycticorax' }

dispatch

update store

// update store key `name`, value is `lorem`
dispatch({ name: 'lorem' })

// multiple key
dispatch({ name: 'lorem', another: 'ipsum' })

// async
function asyncDispatch({ dispatch, getStore }, ...args) {
  console.log(args)
  return new Promise((resolve) => {
    // get current store
    const { name } = getStore()

    // update name
    dispatch({ name: 'a' })

    setTimeout(() => {
      dispatch({ name: 'b' })

      // resolve
      resolve(name)
    }, 1000)
  })
}
dispatch(asyncDispatch, 'a', 'b').then(() => {
  dispatch({ name: 'c' })
}

by default, dispatch will be merged

// this
dispatch({ a: 1, b: 2 })
dispatch({ b: 1 })

// will be merged as
dispatch({ a: 1, b: 1 })

and dispatch is async, but except async dispatch

// async
createStore({ a: 1 })
dispatch({ a: 2 })
console.log(getStore('a')) // { a: 1 }
setTimeout(() => console.log(getStore('a'))) // { a: 2 }

function asyncDispatch({ dispatch, getStore }) {
  return new Promise((resolve) => {
    // update name
    dispatch({ name: 'a' }) // sync dispatch
    console.log(getStore('name')) // a

    setTimeout(() => {
      dispatch({ name: 'b' }) // sync dispatch
      console.log(getStore('name')) // b

      // resolve
      resolve(name)
    }, 1000)
  })
}

set dispatch to sync

createStore({ a: 1 })
dispatch({ a: 2 }, true)
console.log(getStore('a')) // { a: 2 }

subscribe

subscribe listeners for watching store change

const unsubscribe = subscribe((keys) => {
  console.log(keys) // change keys
})
unsubscribe() // unsubscribe

connect

for React only

connect('name', 'another')(ReactComponent)

example

import React, { Component } from 'react'
import { connect } from 'nycticorax'

class A extends Component {
  onClick = () => {
    this.props.dispatch({ 'number': 1 })
  }

  render() {
    const { name, another } = this.props
    return (
      <div>
        <h2>Component A</h2>
        <p>name: {name}</p>
        <p>Click to change value: Number</p>
        <button onClick={this.onClick}>set Number 1</button>
      </div>
    )
  }
}

export default connect('name', 'another')(A)

UMD use

// <script src="https://unpkg.com/nycticorax"></script>

const { createStore, dispatch, ... } = window.nycticorax
const Nycticorax = window.nycticorax.default // use default
const { createStore, dispatch, ... } = new Nycticorax()

Development

# install `falco` global
$ npm i @fratercula/falco -g

# start
$ npm start

# build
$ npm run build

# lint
$ npm run test:lint

# test
$ npm run test:unit

License

MIT

Relevance

Nycticorax

You can’t perform that action at this time.