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>
  )
}