context-hooks

React Hooks for accessing state and dispatch from a store

Install

# Yarn
yarn add context-hooks

# NPM
npm install --save context-hooks

Quick Start

// bootstrap your app

import { StoreContext, createStore } from 'context-hooks'

ReactDOM.render(
  <StoreContext.Provider value={store}>
    <App />
  </StoreContext.Provider>,
  document.getElementById('root'),
)

// individual components

import { useReducers, useConntect } from 'context-hooks'

const App = () => {
  const state = useConntect((state) => ({
    count: state.counter.count,
  }))
  
  const { counter } = useReducers()

  return (
    <Fragment>
      Count: {count}<br />

        <button onClick={() => counter.increase()}>increase count</button>
        <button onClick={() => counter.decrease()}>decrease count</button>
    </Fragment>
  )
}

Usage

NOTE: React hooks require react and react-dom version 16.8.0 or higher.

Example

// reducers

export default {
  counter: {
    initialState: {
      count: 0,
    },
    increase = (state) => ({ count: state.count + 1 }),
    decrease = (state) => ({ count: state.count - 1 }),
  },
}

// bootstrap your app

import { StoreContext, createStore } from 'context-hooks'
import reducers from './reducers'

const store = createStore(reducers)

ReactDOM.render(
  <StoreContext.Provider value={store}>
    <App />
  </StoreContext.Provider>,
  document.getElementById('root'),
)

// individual components

import { useReducers, useConntect } from 'context-hooks'

const App = () => {
  const state = useConntect((state) => ({
    count: state.counter.count,
  }))
  
  const { counter } = useReducers()

  return (
    <Fragment>
      Count: {count}<br />

        <button onClick={() => counter.increase()}>increase count</button>
        <button onClick={() => counter.decrease()}>decrease count</button>
    </Fragment>
  )
}