[React] React-toolkit 정리

※ Redux-toolkit

장점 : 리덕스 패키지의 일환이기 때문에 redux, redux-saga 개념만 가지고 있다면 같은 로직은 아주 간단한 코드로 구현 가능
단점 : Server-side-state , Client-side-state 분리가 안됨

 

※ redux-saga vs redux-toolkit

redux-saga
    - 비동기 데이터의 호출 및 리듀서, 상태변경 관련 함수를 saga에서 generator 함수를 통해 변경 요청
    - 컴포넌트 외부에서 독립적으로 비동기 데이터를 전역관리 하기 위한 라이브러리

redux-thunk
    - action 객체 안쪽에 아예 비동기 데이터 호출 함수 및 상태변화 관리 함수를 같이 등록

redux-toolkit
    - redux-thunk 기반의 통합 라이브러리
    - 기존 action 객체의 생성을 slice라는 파일 형태로 컴포넌트 외부에서 '아주' 간단하게 설정 가능

 

※ redux-toolkit의 작업흐름

    1. redux 폴더 안쪽에 작업하려는 data의 slice 파일 생성 (data fetching후 액션객체 생성 함수, 액션 객체 받아서 전역 데이터 수정 함수)
    2. index.js에서 slice 값으로 연동된 데이터 store에 저장하고 App에 전달
    3. app.js에서 slice파일로부터 action 객체 생성 함수를 import 후 호출하여 action 만들고 dispatch로 전달
    4. 원하는 컴포넌트에서 useSelector로 데이터 가져오기

※ redux-toolkit 사용

    1. redux 폴더를 만든다.
    2. xxxxxslice 파일을 만든다.
    3. redux-toolkit 내용을 작성한다. (store , reducer , saga 등등)
    4. index.js에 reducer를 선언한다.
    5. app.js에 dispatch를 선언한다.
    6. useSelector로 데이터를 가져온다.

 

※ Redux-toolkit으로 client State 전역 관리하는 작업 순서

    - 전역 정보값을 위한 slice 생성
    - 전역 정보값을 초기 전역 state로 등록
    - reducer에는 해당 전역 state 값을 변경해주는 함수를 등록
    - 해당 함수를 원하는 컴포넌트에서 자유롭게 호출해서 전역 state 변경 하도록