如何開始在專案中使用？

一、安裝

1. NPM

在你的 React 專案使用 npm 或是 yarn

npm install recoil

yarn add recoil

2. CDN

<script src="https://cdn.jsdelivr.net/npm/recoil@0.0.11/umd/recoil.production.js"></script>

官網還有提供一些 Bundler (Webpack), ES5 support, ESLint 的說明在這邊不贅述，有興趣可以前往 Recoiljs

二、使用

CodeSandbox Demo

1.在你的 App 頂層把所有元件透過<RecoilRoot>包裹起來！

如同 Redux 或 React Context，我們共享狀態的儲存、提供者，需要放置在元件樹的較頂端(註：通常會在 app.js 或是 index.js)，供我們專案內其他的元件能共享狀態。

Recoil 中，負責儲存所有狀態的元件叫做 RecoilRoot，我們把它放置在 App 層，供底下未來需要使用的元件可以輕易獲取 shared state 。

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

2.建立你的共享狀態 Atom 、 Selector ！

這邊透過 atom 建立了我們第一個想要被共享的狀態 counterState ， 我們給它:
1.一個獨特的key: counter
2.一個預設值: 0

import { atom } from 'recoil';
const counterState = atom({
  key: 'counter', // 必須唯一，不可有相同的key
  default: 0, // 預設值
});

3.藉由 useRecoilState 這個hook，調用你的共享狀態

就像是 React Hook 當中的 useState，我們使用相同的方式呼叫 useRecoilState，並且在其中帶入我們需要使用的共享狀態，在本例當中是剛剛在 atom 建立的 counterState 。
然後拿出我們的 state 跟 setter ， 也就是 [count, setCount] 。
之後我們就可以在這個元件裡面取得及操控共享狀態了。

這邊也可以參考CodeSandbox Demo範例，當中另外一個同樣也使用到 counterState 的元件，看看其中的互動怎麼樣。

import { useRecoilState } from 'recoil';

const Counter = () => {
  const [count, setCount] = useRecoilState(counterState);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={handleClick}>遞增</button>
    </div>
  );
};