1.0.2 • Published 5 years ago
hux v1.0.2
Hux
Access and dispatch to your redux store from anywhere in your component tree using only React Hooks.
Example usage
import Store from 'hux';
const store = createStore(reducer);
const EntryPoint = () => (
<Store.Provider value={store}>
<App />
</Store.Provider>
);
import { useDispatch, useSelector } from 'hux';
const MyComponent = id => {
const value = useSelector(mySelector, id);
const update = useDispatch(myActionCreator)
return (
<input
type="text"
value={value}
onChange={e => update(e.target.value)}>
);
}
API
Store
Usage
<Store.Provider value={store}>
{children}
<Store.Provider>
store
is an object with the methods getState
, subscribe
, and dispatch
(i.e. a redux store).
All children will be able to access the store.
useSelector
Usage
useSelector(selector[, arg1, arg2...])
Paramters
selector
A pure fucntion which takes store state as the first argument n additional paramters.
arg1, arg2...
Arguments to be passed to the selector
after the store state.
Returns
The return value of the selector.
useDispatch
Usage
useDispatch(actionCreator)
Paramters
actionCreator
A pure fucntion which takes n parameters and returns an object with at least a type
property (i.e. a redux action).
Returns
A function which takes n parameters, passes them to the actionCreator
and then dispathes the return value to the store.