add useRedux hook

Author: MrWolfZ

src/alternate-renderers.js

@@ -5,6 +5,7 @@ import connect from './connect/connect'
 
 import { useActions } from './hooks/useActions'
 import { useDispatch } from './hooks/useDispatch'
+import { useRedux } from './hooks/useRedux'
 import { useSelector } from './hooks/useSelector'
 import { useStore } from './hooks/useStore'
 
@@ -21,6 +22,7 @@ export {
   batch,
   useActions,
   useDispatch,
+  useRedux,
   useSelector,
   useStore
 }

src/hooks/useRedux.js

@@ -0,0 +1,40 @@
+import { useSelector } from './useSelector'
+import { useActions } from './useActions'
+
+/**
+ * A hook to access the redux store's state and to bind action creators to 
+ * the store's dispatch function. In essence, this hook is a combination of
+ * `useSelector` and `useActions`.
+ * 
+ * @param {Function} selector the selector function
+ * @param {Function|Function[]|Object.<string, Function>} actions the action creators to bind
+ * 
+ * @returns {[any, any]} a tuple of the selected state and the bound action creators
+ *
+ * Usage:
+ *
+```jsx
+import React from 'react'
+import { useRedux } from 'react-redux'
+
+export const CounterComponent = () => {
+  const [counter, { inc1, inc }] = useRedux(state => state.counter, {
+    inc1: () => ({ type: 'inc1' }),
+    inc: amount => ({ type: 'inc', amount }),
+  })
+
+  return (
+    <>
+      <div>
+        {counter}
+      </div>
+      <button onClick={inc1}>Increment by 1</button>
+      <button onClick={() => inc(5)}>Increment by 5</button>
+    </>
+  )
+}
+```
+ */
+export function useRedux(selector, actions) {
+  return [useSelector(selector), useActions(actions)]
+}

src/index.js

@@ -5,6 +5,7 @@ import connect from './connect/connect'
 
 import { useActions } from './hooks/useActions'
 import { useDispatch } from './hooks/useDispatch'
+import { useRedux } from './hooks/useRedux'
 import { useSelector } from './hooks/useSelector'
 import { useStore } from './hooks/useStore'
 
@@ -21,6 +22,7 @@ export {
   batch,
   useActions,
   useDispatch,
+  useRedux,
   useSelector,
   useStore
 }

test/hooks/useRedux.spec.js

@@ -0,0 +1,51 @@
+/*eslint-disable react/prop-types*/
+
+import React from 'react'
+import { createStore } from 'redux'
+import * as rtl from 'react-testing-library'
+import { Provider as ProviderMock, useRedux } from '../../src/index.js'
+
+describe('React', () => {
+  describe('hooks', () => {
+    describe(useRedux.name, () => {
+      let store
+      let renderedItems = []
+
+      beforeEach(() => {
+        store = createStore(({ count } = { count: -1 }) => ({
+          count: count + 1
+        }))
+        renderedItems = []
+      })
+
+      afterEach(() => rtl.cleanup())
+
+      it('selects the state and binds action creators', () => {
+        const Comp = () => {
+          const [count, { inc }] = useRedux(s => s.count, {
+            inc: () => ({ type: '' })
+          })
+          renderedItems.push(count)
+          return (
+            <>
+              <div>{count}</div>
+              <button id="bInc" onClick={inc} />
+            </>
+          )
+        }
+
+        const { container } = rtl.render(
+          <ProviderMock store={store}>
+            <Comp />
+          </ProviderMock>
+        )
+
+        const bInc = container.querySelector('#bInc')
+
+        rtl.fireEvent.click(bInc)
+
+        expect(renderedItems).toEqual([0, 1])
+      })
+    })
+  })
+})