/
useRedux.js
40 lines (37 loc) · 1.08 KB
/
useRedux.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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)]
}