xaviervia / hoc-with-store

Higher-order React component for binding a Redux Store

hoc-with-store

Higher-order React component for binding a Redux Store

Install

yarn add hoc-with-store

Usage

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import withStore from 'hoc-with-store'

const App = ({dispatch, counter}) => <div>
  {counter}
  <button  
    onClick={() => dispatch({
      type: 'ADD'
    })}>
    Add 1
  </button>
</div>

const store = createStore((state = { counter: 0 }, action) => {
  switch (action.type) {
    case 'ADD':
      return { counter: state.counter + 1 }
    default:
      return state
  }
})

const ConnectedApp = withStore(store)(App)

render(
  <ConnectedApp />,
  document.getElementById('root')
)

Optionally, you can pass mapStateToProps and mapDispatchToProps functions:

const mapStateToProps = (state) => ({
  items: state.items.filter(({ visible }) => visible)
})

const mapDispatchToProps = (dispatch) => ({
  onAddItem: (content) => dispatch({
    type: 'ADD_ITEM',
    payload: content
  })
})

const ConnectedApp = withStore(store, mapStateToProps, mapDispatchToProps)(App)