A React Hooks for React Redux applications
A React Hooks for React Redux applications
npm install react-redux-extended-hooks
// install peerDependencies
npm install react redux react-redux
useSelector
and useDispatcher
are great Hooks API react-redux
has.
However, we sometimes have to define many handlers in render functions like the following.
const App = props => {
const dispatch = useDispatch();
const user = useSelector(state => state.users[props.id], shallowEqual);
const handlerA = useCallback(value => {
dispatch(someAction(value, user);
}, [dispatch, user]);
useEffect(() => {
fetchUsers().then(users => dispatch(loadUsers(users)));
}, [dispatch]);
// :
// :
// far from the component definition.
return (
<div>...</div>
);
}
The above code includes many things not related to your domain logic itself and is not clear. This library allows you not to write code not related to domain logic and to extract the logic from the render function, which makes code clear and testable.
const handleA = (dispatch, user) => (value) => {
dispatch(someAction(value, user);
};
const loadUsers = (dispatch) => {
fetchUsers().then(users => dispatch(loadUsers(users)));
}
const App = props => {
const user = useShallowEqualSelector(state => state.users[props.id], shallowEqual);
const handlerA = useDispatchHandler(handleA, user);
useDispatchEffect(loadUsers);
// :
// :
// far from the component definition.
return (
<div>...</div>
);
}
This is a custom hook for a selector, which uses shallowEqual
for the comparison.
This is what connect
does.
useSelector
uses ===
for the comparison so it sometimes causes undesirable updates.
https://react-redux.js.org/api/hooks#recipe-useshallowequalselector
const state = useShallowEqualSelector((state: any) => state)
This is a custom hook to define a handler using closure values and its arguments.
This returns a memoized handler using useCallback
.
(dispatch, ...closureVariables) => (...paramsOfHandler) => void
const handlePagination = (dispatch, pagination) => (nextPage) => {
//...
}
const App = () => {
const pagination = usePagination();
const onChangePagination = useDispatchHandler(handlePagination, pagination)
return (
<Pagination
pagination={pagination}
onClick={onChangePagination}
/>
);
}
This is a custom hook to define a effect handler using dispatch
.
const fetchNewData = (dispatch, userId) => {
// ...
}
const App = () => {
const user = useShallowEqualSelector(state => state.user);
useDispatchEffect(fetchNewData, user.id);
// ...
}
TBA