ビルド独自の反抗

TLR作業例はcodesandbox .
Recoil Facebookが提供する反応のための新しい実験的な状態管理ライブラリです.核概念は原子とセレクタです.

原子

原子は、州の単位です.例としては、ユーザの入力を表すテキスト状態を指定することができます.

const textState = atom({
  key: 'textState',
  default: '',
});

…の助けを得てuseRecoilValue or useRecoilState フックは、反応コンポーネントで原子を使うことができます:

function TextInput() {
  const [text, setText] = useRecoilState(textState);
  const onChange = (event) => {
    setText(event.target.value);
  };

  return <input type="text" value={text} onChange={onChange} />;
}

セレクタ

SELECTは、原子を受け入れる純粋な関数です.

const charCountState = selector({
  key: 'charCountState',
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

原子と同じuseRecoilValue or useRecoilState フックを使用する必要があります

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

反跳はますます人気があり、今日はそれ以上の13k stars .

これはプロジェクトで使用することを約束します.唯一の欠点は、反跳プロジェクトはまだ実験的です.そして、それは将来若干の危険を与えることができます.
反対側から、あなたは他の州管理に使用されるかもしれません.それはRedux , RxJS , MobX , イベントLeaflet など.それで、あなたはそれに滞在することができますし、プロジェクトの移動のための反動に準備をする?または、もし反則がリリースされない場合は、計画Bをすることができますか?両方の質問に対する答えはイエスであり、どのようにMobxの上にそれを行うにチェックしましょう.

モブックス

MobX シンプルでスケーラブルでテストされた状態管理ソリューションです.

Make sure that everything that can be derived from the application state, will be derived. Automatically.

図書館には以上のものがある24k stars そして、5 opened issues それは本当に良い安定性を示しています.

実施するtextState Mobxを使用すると、クラスを使用し、それを無効にする必要があります.

class TextState = {
  text = "";

  constructor() {
    constructor() {
      makeAutoObservable(this);
    }
  }

  setText(nextText) {
    this.text = nextText;
  }
}

その後、任意の反応コンポーネントで使用できます.

const textState = new TextStat();
function TextInput() {
  const {text, setText} = textState;
  const onChange = (event) => {
    setText(event.target.value);
  };

  return <input type="text" value={text} onChange={onChange} />;
}

その解決策の欠点は、新しい依存関係を導入する必要があるかもしれませんmobx-react 使用observer , コンポーネントが変更に反応するように.
上記の問題を解決するには、Mobxの上にあなた自身の“Recolラッパー”を構築し、必要な正確な機能を実装することが可能です.

モグラ回復

では始めましょうatom 実装.それを知っている必要がある二つのことがあります.

オプション

オプションパラメータkey and default 値(すべての反動機能をカバーするつもりはありません)

interface Config<T> {
  key: string;
  default: T;
}

原子

必要なatomを実装するには、次の手順に従います.

interface AtomType<T> {
  key: string;
  value: T;
  update: (nextValue: T) => void;
}

受け入れる関数を作成することが可能であることを知っているConfig ビルドAtomType :

export function atom<T>(config: Config<T>): AtomType<T> {
  class AtomImpl implements AtomType<T> {
    key: string = config.key;

    value: T = config.default;

    constructor() {
      makeAutoObservable(this);
    }

    update(nextValue: T) {
      this.value = nextValue;
    }
  }

  return new AtomImpl();
}

これは、スタンドアロンクラスとして使用することができますまたはuseRecoilValue or useRecoilState フック.

ユーザ環境

それは、原子を受け入れて、その値を返す反応フックです.値はまた、useState また、変更時に動作する可能性があります.

export function useRecoilState<T>(atom: AtomType<T>): [T, (value: T) => void] {
  const [value, setValue] = useState<T>(atom.value);
  useEffect(() => {
    const disposer = autorun(() => {
      setValue(atom.value);
    });
    return disposer;
  }, [atom]);
  return [
    value,
    (value: T) => {
      atom.update(value);
    }
  ];
}

ユーザ値

その反跳フックはuseRecoilState 結果の配列の最初の値を取得する

export function useRecoilValue<T>(atom: AtomType<T>): T {
  return useRecoilState(atom)[0];
}

セレクタ

次のことを実装する必要がありますselector . 各セレクタは、可能性を実装する必要がありますget and set 原子.私たちはget 機能.と同じatoms , 各セレクタにはkey プロパティ.これを知って、以下の機能を実装する必要があります.

export function selector<T>(options: {
  key: string;
  get: (util: { get: <V>(atom: AtomType<V>) => V }) => T;
}): AtomType<T> {
  ...
}

原子の実際の値を取得するにはoptions.get を使用できます.それは新しいローカルを定義する可能性を与えますatom これは値を表し、変更に反応するautorun モブから.その場合、最終的な実装selector は以下のようになります.

export function selector<T>(options: {
  key: string;
  get: (util: { get: <V>(atom: AtomType<V>) => V }) => T;
}): AtomType<T> {
  const get = (atom: AtomType<any>) => {
    return atom.value;
  };

  const getActualValue = () => options.get({ get });

  const resultAtom = atom({
    key: options.key,
    default: getActualValue()
  });

  autorun(() => {
    resultAtom.update(getActualValue());
  });

  return resultAtom;
}

それは基本的に我々が必要とするすべてです、そして、この瞬間に、我々はすでにプロジェクトで「反動」を始めることができます.

その実装の利益

利点の一つは、あなたが新しい方法で好きな状態管理ライブラリを使用することができます.もう一つは、カスタム原子を定義する可能性です.例えば、いくつかの動作をトリガーする必要があるとしましょうtextState 原子が変更されます.あなたが使用する必要が反則とそれを行うにはeffects_UNSTABLE . Mobxを使用すると、カスタムのAtom実装を提供できます.

const textState = atom(textStateMobx);

どこtextStateMobx の実装AtomType 追加機能:

class TextState implements implements AtomType<string> {
  key: string = 'textState';

  value: string = '';

  constructor() {
    makeAutoObservable(this);
    this.debouncedApiCall = debounce(this.doApiCall, DEBOUNCE_TIME);
  }

  update(nextValue: string) {
    this.value = nextValue;
    debouncedApiCall();
  }

  doApiCall() {
    if (this.value.length > MIN_LENGTH) {
      // some api call
    }
  }
}

ビル" Mobx反跳"アプリケーション

反跳するexample テキスト入力と入力されたシンボルカウンタで.調整する必要がほとんどなく、全体の例を取ることができます.

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

export default function App() {
  return <CharacterCounter />;
}

唯一の違いはatom , selector , useRecoilState and useRecoilValue の代わりにローカルで定義されている"'recoil' :

import React from 'react';
import {
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from './mobx2recoil';

読書のおかげで、私はあなたのアイデアを楽しんでほしい.作業例はcodesandbox . そして、コーディングと幸運!