# tiny-state-manager

> A tiny state manager using eventemitter, for react and stuff

Latest version **0.1.10** (published 2017-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install tiny-state-manager
pnpm add tiny-state-manager
yarn add tiny-state-manager
bun add tiny-state-manager
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2017-10-25 |
| First published | 2017-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | jason-c-child |
| Maintainers | jason-c-child |
| Keywords | react, events, state |

## Links

- npm: https://www.npmjs.com/package/tiny-state-manager
- Repository: https://github.com/jason-c-child/tiny-state-manager
- Homepage: https://github.com/jason-c-child/tiny-state-manager#readme
- Issues: https://github.com/jason-c-child/tiny-state-manager/issues
- npm.io page: https://npm.io/package/tiny-state-manager

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.10 (latest) — 2017-10-25
- 0.1.9 — 2017-02-25
- 0.1.8 — 2017-02-01
- 0.1.7 — 2017-02-01
- 0.1.6 — 2017-01-29
- 0.1.5 — 2017-01-29
- 0.1.4 — 2017-01-29
- 0.1.3 — 2017-01-22
- 0.1.2 — 2017-01-21
- 0.1.1 — 2017-01-19
- 0.1.0 — 2017-01-18

## README

# tiny-state-manager

Very easy to understand and pretty simple. In the past I found that redux was a lot of boiler plate for a lot of the
simple use cases I had. Concentrating all state mutating actions in one place made sense to me. When I use this I
will typically attach a listener to handle stuff like API requests and what not.

You can find a simple 'counter' example in the aptly named ['example' folder](https://github.com/jason-c-child/tiny-state-manager/tree/master/example)

###

The whole thing is tiny

```javascript
import EventEmitter from 'events'

const appState = seedState => {
  const emitter = new EventEmitter()
  let state = seedState || {}
 
  emitter.on('set', function(payload) {
      state = payload
      this.callback(state)
  })
  
  emitter.on('reset', function() {
      seedState && (state = seedState)
      this.callback(state)
  })
  
  emitter.on('update', function(payload) {
      state = {...state, ...payload}
      this.callback(state)
  })
  
  return {
    emitter,
    state
  }
}

export default appState
```

I typically use this in a top-level 'container' component (most of my react projects are small SPA's)

```javascript
//...other imports...
import React, {Component} from 'react'
import MyUserComponent from './MyUserComponent'
import appState from 'tiny-state-manager'

// setup initial app state as object
const initAppState = {
  loading: false,
  userObject: {},
  moreStuff: []
}

// call appState with initial state object to get state manager
const stateManager = appState(initAppState)

class AppContainer extends Component {
  constructor(props) {
    super(props)
    // set the stateManager's emitter callback so container state gets updates
    stateManager.emitter.callback = x => this.setState(x)
    // load initial container state from the stateManager
    this.state = stateManager.state
  }
  
  render() {
    const {emitter} = stateManager
    const {userObject} = this.state
    // pass the emitter down to any component that needs
    // to communicate a state change request via
    // props.emitter.emit('update', {...newState})
    return (
      <div>
          <MyUserComponent {emitter} {userObject}/> 
      </div>
    )
  }
}
```

Now your more 'presentation' oriented components have the state they need and a 
way to request state mutations

```javascript
import React from 'react'

export default = props =>
  <div>
    <div>
      Howdy, {props.userObject.name ? props.userObject.name : 'stranger'}!
    </div>
    <div>
      Change Name: 
        <input type="text" onChange={x => props.emitter.emit('update', {userObject: {...props.userObject, name: x.target.value})}/>
    </div>
  </div>
```

Adding API calls may be like this (but with error handling...)

```javascript
stateManager.emitter.on('action', function(payload) {
    switch(payload.type) {
        case 'login':
            fetch('http://our.api.io/users', {method: 'POST', body: payload.data})
            .then(x => x.json())
            .then(x => this.emit('update', {userData: {x}}))
        break
    }
})
```

and now you can just emit this from wherever you have a handle on the emitter
 
 ```javascript
 import React from 'react'
 
 export default = props =>
   <div>
     <div>
       Howdy, {props.userObject.name ? props.userObject.name : 'stranger'}!
     </div>
     <div>
       Change Name: 
         <input type="text" onChange={x => props.emitter.emit('update', {userObject: {...props.userObject, name: x})}/>
     </div>
     <button type="button" onClick={() => props.emitter.emit('action', {type: 'login', data: {...props.userObject}})}
   </div>

```

A function called `getState()` was added to the emitter object to allow you to get a copy of the current state
from a stateless component that may not have all context cleanly passed via props (like perhaps a form). Use it like:

```javascript
// ...stuff...
<button onClick={() => {
  let {count} = props.emitter.getState()
  props.emitter.emit('update', {count: ++count})
}}>+1</button>

```

Nothing fancy, no middlewares, etc.

---
_Source: https://npm.io/package/tiny-state-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._