useRestate ⚡️
A React Hook that subscribes your state selector to the store and memoizes your action dispatchers.
;; { const count = ; const increment decrement = ; return <div> <h2>count</h2> <button onClick=increment>Increment</button> <button onClick=decrement>Decrement</button> </div> ;}
Install
# Yarn yarn add use-restate # NPM npm install use-restate
Features
- Feather light
- Avoid needless re-renders
- A familiar API
- Works with any Redux-like store
- Memoize single or multiple action dispatch functions
- Quick access to store dispatch
- Full Typescript support
- Works without
react-redux
Prerequisites
⚠️ React hooks require react
& react-dom
at version 16.7.0-alpha.0 or higher.
Usage
The use-restate
package requires you to provide your Redux-like store to RestateProvider
.
Setting up the store
Before using the hook, your store should be passed to RestateProvider
. You also have access to RestateContext
should you need it to inject middleware.
;;;; ... const store = ; { return <RestateProvider value=store> ... </RestateProvider> ;}
API
useRestate(mapState)
Automatically subscribe your mapState selectors to the store so that each of them update on every change.
;; { const count = ; return <div> <p>count</p> </div> ;}
useAction(action)
Wraps the action in a dispatcher and memoizes it so that it can be used freely in a React component. Internally uses useCallback()
to memoize the dispatch function.
;; { const incrementAction = type: 'INCREMENT' ; const increment = ; return <div> <a onClick=increment>Increment count</a> </div> ;}
useActions(actionsMap)
Wraps a map of actions in a dispatcher and memoizes each one with useCallback
. Returns the same map with each key containing its paired action dispatcher.
;; { const increment decrement = ; return <div> <a onClick=increment>Increment count</a> <a onClick=decrement>Decrement count</a> </div> ;}
useDispatch()
Returns the dispatch
method based on the store.
;; { const dispatch = ; return <a onClick= >Decrement count</a> ;}
Issues & suggestions
If you find any runtime issues or have any suggestions on how to improve the package please do open an !