반동 - React 및 React-Native를 위한 상태 관리(2022)

짧은 소개:

반동이 무엇인가요? Recoil은 Facebook 팀에서 만든 React 및 React-Native 애플리케이션용 상태 관리 라이브러리로, Redux 또는 Context API 또는 기타 상태 관리 라이브러리의 대안으로 사용할 수 있습니다. Recoil을 사용하면 원자(공유 상태)에서 선택기(순수 함수)를 거쳐 React 구성 요소로 흐르는 데이터 흐름 그래프를 만들 수 있습니다. 원자는 구성 요소가 구독할 수 있는 상태의 단위입니다. 선택기는 이 상태를 동기식 또는 비동기식으로 변환합니다.

왜 반동?

Recoil은 Redux 또는 기타 상태 관리 라이브러리를 설정하기 위한 많은 상용구 코드에 비해 설정하기 쉽습니다.

더 이상 고민하지 않고 행동에 뛰어 들자!

설치:

Reactjs 또는 React-Native 공식 문서의 도움을 받아 React 또는 React-Native에서 기본 프로젝트를 설정하세요.

그런 다음 NPM 또는 Yarn에 대한 아래 명령을 사용하여 프로젝트에 Recoil을 설치합니다.

오후:

npm install recoil

실:

yarn add recoil

용법:

프로젝트의 루트 파일(예: App.Js)로 이동합니다. RecoilRoot를 가져오고 루트 수준에서 구성 요소를 감싸십시오.

App.js:

import {RecoilRoot} from 'recoil';

function App() {
  return (
      <RecoilRoot>
          {/*Rest of your application*/}
      </RecoilRoot>
  );
} 

src 폴더 아래에 새 폴더를 만들고 'store' 또는 원하는 이름을 지정할 수 있습니다. 이 예에서는 'recoil'이라고 합니다. 'recoil' 폴더 아래에 'atoms', 'hooks'라는 두 개의 하위 폴더를 만들고 아래와 같이 각 폴더에 대해 'index.js' 파일을 만듭니다.



반동/atoms/index.js:

여기에서 기본값으로 초기 상태를 생성합니다. 각 원자는 상태입니다(useState와 유사). 이 아톰의 상태가 변경되면 이 아톰에 가입된 구성 요소만 다시 렌더링되므로 불필요한 다시 렌더링이 발생하지 않습니다. 필요한 만큼 원자를 만들 수 있습니다.

import {atom} from 'recoil';

export const count = atom({
  key: 'count',
  default: 0,
});

반동/후크/index.js:

여기에서 상태를 조작하기 위한 작업을 생성합니다(useState의 setState와 유사). 여기에서 모든 비즈니스 로직과 상태를 업데이트하기 위한 네트워크 요청을 생성할 수 있습니다. 초기 상태에서 원자를 가져오고 상태를 업데이트하는 작업을 만듭니다. 상태 및 작업으로 내보냅니다.

import {useRecoilState} from 'recoil';
//Atoms
import * as atoms from '../atoms';

export const useAtoms = () => {
  const [count, updateCount] = useRecoilState(atoms.count);

  const setCount = payload => updateCount(payload);

  //Atoms State
  const state = { count };

  //Atoms Actions
  const actions = { setCount };

  return {state, actions};
};

src/스크린/HomeScreen.js:

마지막으로 새로 생성된 상태와 작업을 사용하려면 'HomeScreen.js' 예제에서 후크를 구성 요소로 가져오고 후크를 '상태'와 '작업'으로 분해합니다. 구성 요소에 직접 상태에 액세스하고 작업 핸들러를 사용하여 상태를 업데이트합니다.

//State
import {useAtoms} from '../../recoil/hooks';

const HomeScreen = (props) => {
  const {state, actions} = useAtoms();


return (
    <div>

       <span>{state.count}</span>

       <button onClick={()=>actions.setCount(state.count+1)}>INCREMENT</button>

    </div>
 )
}

export default HomeScreen;

그게 다야. 필요에 따라 논리를 분리하는 여러 후크를 만들 수도 있습니다.

결론:

보시다시피 전체 애플리케이션에 대한 전역 상태 관리를 설정하기가 매우 쉬웠습니다. 후크의 도움으로 상태의 IntelliSense 형식과 예상되는 형식도 가져옵니다. 반동에는 다른 많은 이점도 있습니다. Recoil.org에서 그들의 문서를 확인하십시오. 끝까지 읽어 주셔서 감사합니다.

이 게시물이 개발자 여정을 개선하는 데 도움이 되었기를 바랍니다.

원래 게시 날짜: https://blogs.appymango.com/blogs/62724084e93892f586ac6d21