TIL : RTK 이용하기

RTK는 왜 나왔을까?

 

RTK 공식 문서에  따르면 

"Configuring a Redux store is too complicated"
 리덕스에서  세팅하는데  복잡하다.

"I have to add a lot of packages to get Redux to do anything useful"
리덕스에서  사용하려면  많은 패키지가 필요합니다.

"Redux requires too much boilerplate code"
리덕스는  많은  보일러플레이트 코드를  요구합니다.

 

3가지 이유 덕분에  세상에 나오게 되었습니다.

 

그리고 또한  리덕스를  좀 더 간편하게 사용하는데  도움을 주는  도구모음이라는  것도 알게 되었습니다.

 

 

리덕스 툴킷 들어가기

 

 ( 0 ) 설치하기

$ npm install @reduxjs/toolkit

 

 

(1)  리덕스의  combineReducers , createStore 이  configStore로 흡수 되었습니다.

 

리덕스

 

  RTK

 

 

(2)  리덕스에서 action  변수 , 함수를  따로따로 안써주어도 됩니다. createSlice를 이용합니다.

 

리덕스

 

RTK

 

( 3  )  이제  useSelector 를 이용해서  store내 데이터를 조회하고 ,  useDispatch()를 이용해서  리덕스 스토어에

  전달합니다.  그러면  바뀐 상태값을  UI에 전달하겠지요

import {useDispatch, useSelector} from  'react-redux';
import { addCount , minusCount } from './store/modules/counter';

function App() {

  const state = useSelector((state)=>(state));
 
  // 행동을 인지해서 리덕스 리듀서로 넘겨주는 디스패치
  const dispatch = useDispatch();


return(
     <p>{state}</p>
     <button onClick={()=>{dispatch(addCount())}}>
        1 더하기
     </button>
     <button onClick={()=>{dispatch(minusCount())}}>1 뺴기</button>

)
}

   

 

개발자 도구인 리덕스 개발자 도구를 통해  바라보기

 

1 더하기 

 

1  빼기

 

 

나의 느낀점

 

기존 리덕스를 이용할시에   액션 변수 , 함수  , 다 세팅을 해주어야 하는데   그럴 필요 없게 해주었습니다.

 

또한   리듀서 여러개를 묶거나  store를  생성하는  메서드 이용하지 않고도  그런 작업을  가능하게 해주었다는

 

면에서 너무 좋았습니다.