Simplicity & Aesthetics over Complexity
Life is too sweet to be loosing sleep over trying to understand how a library or framework works, as long as a solution or library is working and has long term support I'm okay with it
Recoil JS
Example with async queries
using useRecoilValueLoadable
hook.
This hook is intended to be used for reading the value of asynchronous selectors. This hook will implicitly subscribe the component to the given state.
This hooks returns a Loadable
object for the current state with the following interface:
-
state: Indicates the status of the selector. Possible values are
'hasValue'
,'hasError'
,'loading'
. -
contents: The value represented by this
Loadable
. If the state is'hasValue'
, it is the actual value, if the state is'hasError'
it is the Error object that was thrown, and if the state is'loading'
, then it is a Promise of the value.
The example code below implements useRecoilValueLoadable
hook from recoilJS using Next JS, in a use-case when implementing private routes using HOC
import { useRouter } from "next/router";
import React from "react";
import { useRecoilValueLoadable } from "recoil";
import getAuthUser from "../store/selectors/getAuthUser";
const withAuthConsumer = (WrappedComponent: any) => {
return (props: any) => {
const authUser = useRecoilValueLoadable(getAuthUser);
const router = useRouter();
// checks whether we are on client / browser or server.
if (typeof window !== "undefined") {
if (authUser.state == "loading") {
return null;
}
if (
authUser.state == "hasValue" &&
authUser.contents?.user_type == "consumer"
) {
return <WrappedComponent {...props} />;
} else if (
authUser.state == "hasValue" &&
authUser.contents?.user_type == null
) {
router.push("/auth/login");
return null;
} else {
router.push("/auth/login");
return null;
}
}
// If we are on server, return null
return null;
};
};
export default withAuthConsumer;
Check this useRecoilValueLoadable for more explanation.
Top comments (0)