Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mehdux

Package Overview
Dependencies
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mehdux

A straight forward state container

  • 0.2.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
44
increased by4300%
Maintainers
1
Weekly downloads
 
Created
Source

mehdux

mehdux

Just another tiny, simple state machine

  • Easy to grasp API
  • Tiny: 577 bytes gzipped
  • Small React and Preact integrations (~750 bytes gzipped)

Motivation

Nobody thinks the JS community needs another state management library, so I made one to spite you all.

Usage

npm install mehdux

Initializing mehdux

import { stateManager } from 'mehdux'

const initialState = {
  someValue: 'My value'
}

const actions = {
  setName: state => value => ({
      ...state,
      someValue: value
    })
  }
}

const store = stateManager(initialState, actions)

Subscribe to state changes

store.subscribe(console.log)

store.actions.setValue('A cooler value')
// logs { someValue: 'A cooler Value' }

Usage with other frameworks

import { connect } from 'mehdux/react' // or 'mehdux/preact

const SomeComponent = ({ myValue }) => <h1>{myValue}</h1>

export default connect(store)(SomeComponent)
// Some component has access the whole state and all the actions in the store
Listening to just certain parts of the state tree
import { connect } from 'mehdux/react' // or 'mehdux/preact

const SomeComponent = ({ myValue }) => <h1>{myValue}</h1>

function mapStateToProps(state) {
  return {
    myValue: state.something.i.care.about
  }
}

export default connect(store, state, mapStateToProps)(SomeComponent)
// Some component has access to myValue and all the actions in the store
Passing in certain actions
import { connect } from 'mehdux/react' // or 'mehdux/preact'

const SomeComponent = ({ myValue }) => <h1>{myValue}</h1>

function mapStateToProps(state) {
  return {
    myValue: state.something.i.care.about
  }
}

function mapActionsToProps(actions) {
  return {
    setName: actions.setName,
    setUpperCaseName: (value) => actions.setName(value.toUpperCase())
  }
}

export default connect(store, null, mapActionsToProps)(SomeComponent)

/*
Some component has access to the whole state tree
and the setName and setUpperCaseName functions
*/
Dispatching async thunk-like actions
const actions = {
  setName: state => {
    return value => ({
      ...state,
      someValue: value
    })
  },
  fetchAndSetName: async (state, dispatch) => {
    const res = await fetch('https://myapi.com/v0')
    const data = await res.json()
    dispatch('setName', data.name)
  }
}

License

MIT.

FAQs

Package last updated on 29 Jan 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc