All in on React hooks.

README.md

@@ -1,15 +1,15 @@
 <p align='center'>
   <img src="https://i.imgur.com/KHTgPvA.png" width="320" />
 </p>
-<p align='center'>Easy peasy redux-powered state management</p>
+<p align='center'>Easy peasy state for React</p>
 
 [![npm](https://img.shields.io/npm/v/easy-peasy.svg?style=flat-square)](http://npm.im/easy-peasy)
 [![MIT License](https://img.shields.io/npm/l/easy-peasy.svg?style=flat-square)](http://opensource.org/licenses/MIT)
 [![Travis](https://img.shields.io/travis/ctrlplusb/easy-peasy.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/easy-peasy)
 [![Codecov](https://img.shields.io/codecov/c/github/ctrlplusb/easy-peasy.svg?style=flat-square)](https://codecov.io/github/ctrlplusb/easy-peasy)
 
 ```javascript
-import { createStore } from 'easy-peasy';
+import { EasyPeasyProvider, createStore, useStore, useAction } from 'easy-peasy';
 
 const store = createStore({
   count: 1,
@@ -18,10 +18,17 @@ const store = createStore({
   }
 });
 
-store.dispatch.inc();
+const Counter = () => {
+  const count = useStore(state => state.count)
+  const inc = useAction(actions => actions.inc)
+  return (<button onClick={inc}>{count}</button)
+}
 
-store.getState();
-// { count: 2 }
+const App = () => (
+  <EasyPeasyProvider store={store}>
+    <Counter />
+  </EasyPeasyProvider>
+)
 ```
 
 ## Features
@@ -502,7 +509,7 @@ const totalPriceSelector = select(state =>
   state.products.reduce((acc, cur) => acc + cur.price, 0),
 )
 
-const finalPriceSelector = select(
+const netPriceSelector = select(
   state => state.totalPrice * ((100 - state.discount) / 100),
   [totalPriceSelector] // 👈 declare that this selector depends on totalPrice
 )
@@ -511,7 +518,7 @@ const store = createStore({
   discount: 25,
   products: [{ name: 'Shoes', price: 160 }, { name: 'Hat', price: 40 }],
   totalPrice: totalPriceSelector,
-  finalPrice: finalPriceSelector
+  netPrice: netPriceSelector // price after discount applied
 });
 ```
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "easy-peasy",
-  "version": "0.9.1",
-  "description": "Easy peasy redux-powered state management",
+  "version": "0.10.0-alpha.0",
+  "description": "Easy peasy state for React",
   "license": "MIT",
   "main": "dist/easy-peasy.js",
   "files": [
@@ -28,9 +28,12 @@
     "test:coverage": "npm run test -- --coverage",
     "test:coverage:deploy": "npm run test:coverage && codecov"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "prop-types": "^15.6.2",
+    "react": "16.7.0-alpha.0"
+  },
   "dependencies": {
-    "immer": "^1.7.2",
+    "immer": "^1.7.3",
     "memoize-one": "^4.0.2",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0"
@@ -68,13 +71,16 @@
     "prettier-eslint": "^8.8.2",
     "pretty-bytes": "^5.1.0",
     "pretty-format": "^23.6.0",
+    "prop-types": "^15.6.2",
     "ramda": "^0.25.0",
+    "react": "16.7.0-alpha.0",
+    "react-dom": "16.7.0-alpha.0",
+    "react-testing-library": "^5.2.3",
     "readline-sync": "^1.4.7",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-uglify": "^6.0.0",
-    "sinon": "^7.0.0"
+    "rollup-plugin-uglify": "^6.0.0"
   },
   "jest": {
     "collectCoverageFrom": [

rollup.config.js

@@ -5,7 +5,14 @@ const packageJson = require('./package.json')
 process.env.BABEL_ENV = 'production'
 
 module.exports = {
-  external: ['immer', 'memoize-one', 'redux', 'redux-thunk'],
+  external: [
+    'immer',
+    'memoize-one',
+    'prop-types',
+    'react',
+    'redux',
+    'redux-thunk',
+  ],
   input: 'src/index.js',
   output: {
     file: `dist/${packageJson.name}.js`,

src/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const EasyPeasyContext = createContext()
+
+export default EasyPeasyContext

src/hooks.js

@@ -0,0 +1,15 @@
+import { useState, useEffect, useMemo, useContext } from 'react'
+import EasyPeasyContext from './context'
+
+export function useStore(mapState) {
+  const store = useContext(EasyPeasyContext)
+  const [state, setState] = useState(mapState(store.getState()))
+  const result = useMemo(() => state, [state])
+  useEffect(() => store.subscribe(() => setState(mapState(store.getState()))))
+  return result
+}
+
+export function useAction(mapActions) {
+  const store = useContext(EasyPeasyContext)
+  return mapActions(store.dispatch)
+}

src/index.js

@@ -1,3 +1,5 @@
 import { createStore, effect, select } from './easy-peasy'
+import { useStore, useAction } from './hooks'
+import EasyPeasyProvider from './provider'
 
-export { createStore, effect, select }
+export { createStore, effect, select, useStore, useAction, EasyPeasyProvider }

src/provider.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import EasyPeasyContext from './context'
+
+const EasyPeasyProvider = ({ children, store }) => (
+  <EasyPeasyContext.Provider value={store}>
+    {children}
+  </EasyPeasyContext.Provider>
+)
+
+EasyPeasyProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  store: PropTypes.object.isRequired,
+}
+
+export default EasyPeasyProvider