Mini Context Store

A react state management library using new context api.

Installation

npm i mini-context-store --save

Basic Usage

  import React, { Fragment } from 'react'
  import createStore from 'mini-context-store'

  const { Provider, connect } = createStore(
    { counter: 0 },
    {
      onAdd: () => dispatch => dispatch(({ counter }) => ({ counter: counter + 1 })),
      onSubtract: () => dispatch => dispatch(({ counter }) => ({ counter: counter - 1 })),
    },
  )
  let Counter = ({ counter, onAdd, onSubtract }) => (
    <Fragment>
      <span>{counter}</span>
      <button onClick={onAdd}>+1</button>
      <button onClick={onSubtract}>-1</button>
    </Fragment>
  )
  Counter = connect((state, handlers) => ({...state, ...handlers}))(Counter)

  const App = () => <Provider><Counter /></Provider>

Examples

More examples click here

API

createStore

  const {Provider, Consumer, connect} = createStore(initialState, handlers)

Provider

  <Provider>
    {/* children */}
  <Provider/>

A react component allows Consumers or connected component to subscribe the state changes. NOTE: No need to pass value to Provider

Consumer

  <Consumer>
    {(state, handlers) => /* use state and handlers here */}
  </Consumer>

A react component subscribes state changes.

connect

  const EnchancedComponent = connect(mapStoreToProps)(BaseComponent)

connect is a function receives a map functions and return a high-order component. The high-order component receives a BaseComponent, then return a EnchancedComponent that subscribes state changes. mapStoreToProps receives state and handlers, return an object that will be merged in EnchancedComponent' props.

Reference

• react-waterfall
• react-contextual