Lesley NPM | npm.io

Lesley @BETA

Dead simple state manager for React | github.com/Eazymov/Lesley

Installation

Direct `<script />` include:

Include Lesley after React.

<script src="path/to/React"></script>
<script src="https://cdn.jsdelivr.net/npm/lesley@latest"></script>

or via unpkg

<script src="path/to/React"></script>
<script src="https://unpkg.com/lesley@latest"></script>

NPM

npm install lesley --save

Yarn

yarn add lesley

Why

The purpose of this library is to make global state management in React as simple as possible

Examples

Basic example

Creating the Store

// store/index.js
import Lesley from 'lesley'

const initialState = {
  // ...data you need
  currentUser: {
    name: 'Jon Doe',
    age: 20,
  },
}

const store = new Lesley.Store(initialState)
const connect = Lesley.createConnector(store)

export { connect }

Connecting component to the store

// components/MyComponent
import React from 'react'

import { connect } from '../../store'

class MyComponent extends React.Component {
  handleInput = event => {
    const { value } = event.target

    this.props.changeUsername(value)
  }

  render() {
    const { username } = this.props

    return <input value={username} onInput={this.handleInput} />
  }
}

const mapState = state => ({
  username: state.currentUser.name,
})

const mapActions = state => ({
  changeUsername(value) {
    state.currentUser.name = value
  },
})
/**
 * You can omit any of arguments or just pass undefined
 * e.g. connect(mapState) or connect(undefined, mapActions)
 */
export default connect(mapState, mapActions)(MyComponent)

Edit this example on codesandbox.io

Sharing actions

Creating actions

// store/actions

const increase = state => {
  state.count += 1;
};

const decrease = state => {
  state.count -= 1;
};

export { increase, decrease };

Connect actions to the component

// components/MyComponent
import React from 'react'
import { bindActions } from 'lesley'

import { connect } from '../../store'
import { increase, decrease } from '../../store/actions'

const MyComponent = ({ count, increase, decrease }) => (
  <div>
    <h3>Count: { count }</h3>
    <button onClick={increase}>Increase</button>
    <button onClick={decrease}>Decrease</button>
  </div>
)

const mapState = state => ({
  count: state.count,
})

const mapActions = state => bindActions({
  increase,
  decrease,
}, state)

export default connect(mapState, mapActions)(MyComponent)

Edit this example on codesandbox.io

Sharing actions via HOCs

// HOC/withUserActions
import api from '../api'
import { connect } from '../store'
/**
 * e.g. the state is: { user: null }
 */
const withUserActions = connect(
  undefined, // omit the first `mapState` argument
  state => ({
    setUser(userProfile) {
      state.user = userProfile
    },
    logout() {
      api.logout()

      state.user = null
    },
  }),
)

export default withUserActions

// components/MyComponent
import React from 'react'

import api from '../../api'
import withUserActions from '../../HOC/withUserActions'

class MyComponent extends React.Component {
  componentDidMount() {
    const { setUser } = this.props

    api.getUser().then(userProfile => setUser(userProfile))
  }

  render() {
    const { logout } = this.props

    return <button onClick={logout}>Logout</button>
  }
}

export default withUserActions(MyComponent)

Edit this example on codesandbox.io

You can share the state the same way

How It Works

Lesley is reactive, so the store reacts when you change the state. When you create Lesley.Store instance via new Store(initialState) Lesley walks through each state property and observes it with getters/setters. If state property value is an object Lesley observes this object too, also if in runtime you assign an object to some of state properties Lesley will also observe it. You can be familliar with this behavior if you have experience in Vue.js

But how Lesley knows which component needs to be updated? When you connect component to the store Lesley maps state to this component via mapState function, remembers which properties component depends on and subscribes component for updates only for this properties, so when you change the state Lesley knows exactly which components should be updated. It makes it fast because of Lesley doesn't make unnecessary iterations or checks to know what to update