自発反応スタック

6388 ワード
recoil react nextjs テキストリンク
複雑さの単純さと美学
生命や図書館やフレームワークの仕組みを理解しようとして睡眠を失うことは、解決策やライブラリが動作し、長期的なサポートを持っている限り私はそれを大丈夫です

反跳JS


asyncクエリの例


userecoilvalueloadableフックを使用する。


このフックは非同期セレクタの値を読むために使用されます.このフックはコンポーネントを暗黙のうちに指定した状態にします.
このフックは、現在の状態のLoadableオブジェクトを次のインターフェイスで返します.

  • state :セレクタの状態を示します.使用可能な値は'hasValue'、'hasError'、'loading'である.

  • 内容:このLoadableで表される値.状態が'hasValue'ならば、それは実際の値です、状態が'hasError'ならば、それは投げられたエラーオブジェクトです、そして、状態が'loading'ならば、それは値の見込みです.
    • 以下の例のコードは、Next JSを使用しているRepliljsからuseRecoilValueLoadableフックを実装します
    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;
    詳細については、useRecoilValueLoadableを確認してください.

    HTMLからJSXへ


    https://htmltojsx.in/
    日付の代わりに時刻
    gcc学習記録