redux를 왜 사용하냐면!
1. state를 한곳에서 관리할 수 있어서 컴포넌트들이 props없이 state를 다루기 쉽다.
2. 수정방법을 미리 reducer라는 함수로 정의해놔서 state 수정시 발생하는 버그를 줄일 수 있다.
그 외엔 사용할 일이 없다 코드만 길어진다!
- redux 공식 toolkit 라이브러리를 써서 이쁘게 코드를 짜는 신규방식인 redux
- 예전처럼 if문 switch 문 그런것을 사용하는 전통방식 redux
둘다 타입 지정을 어떻게 하는지 알아보자.
리덕스 설치는 위처럼 진행하면 된다.
위와 같은 예제를 준비했다. reducer이라는 함수를 만들고 그 state를 담을 store라는 변수를 만들고 모든 컴포넌트들이 사용할수있게 감싸준것이다.
이렇게 셋팅하면 자유롭게 reducer이라는 state를 가져다 사용하고 수정할수있다. 타입지정을 변수와 함수정의에 해주면 된다.
이렇게 초기값 부분에 타입을 지정해주면 reducer에 있는 state에는 타입을 지정할 필요없이 자동으로 타입이 부여된다. 그후 action부분에 타입을 지정해줘야하는데 action은 컴포넌트에서 dispatch라는 함수를 이용해 state수정 요청을 할수있는데 거기에 넣는 파라미터와 같다. 해당 파라미터가 어떻게 생겼는지 지정한다.
이렇게 하면 redux에 셋팅은 끝났다. redux에서 만든 state를 사용하는 법을 알아보자.
HOOK을 사용해서 useSelector을 사용하면 redux에 있던걸 가져달라는 뜻이다.
state부분을 작성하면 redux에 있던 state가 남게된다.
const 초기값:{count:number} = {count: 0}; const store = createStore(reducer); 이부분에서 설정한 타입을 그대로 지정해주면 된다.
근데 번번히 타입을 수정해주기는 좀 귀찮음이 발생한다. index.tsx수정할때 마다 해줘야 하니 위처럼 export를 먼저해서 store라는 변수의 타입을 내보내주는것이다. 공식문서에 적힌 사용법이다. 그럼 store의 타입이 그대로 저장되어잇다.
이렇게 사용하면 index.tsx 에 타입을 수정해도 타입을 일일이 변경하지 않아도 된다.
@reduxjs/toolkit을 사용하면 redux를 위처럼 수정할수도 있다. 물론 npm을 이용해 설치후 사용해야한다.다른점은 state , reducer 를 오브젝트로 정리한다는것이 다르다.
createSlice에는 3가지 항목이 꼭 들어가야한다.
name 값을 작명해야하고 , initialState 에는 state초기값을 넣어줘야한다.
그리고 reducer은 데이터를 수정하는 방법이다.
이 문법의 좋은점은 !
1. 함수라서 보기 좋다
2. state 수정시 사본만들 필요 없음
이러한 점때문에 코드가 더 깔끔해진다.
state와 reducer를 합친것을 slice라고 부르는데 slice를 다 만들면 slice에 reducer를 빼서 보내면 된다.
그럼 타입지정은 당연히 변수 /함수 만들때 타입지정하면된다. 그런데 첫번째 파라미터는 타입지정이 필요없다 자동으로 초기값에 지정한 타입이 지정된다. 리턴할 필요가없으니 리턴 타입도 필요없다.
action에 타입 지정이 필요한데 예전문법에서는 dipatch할때 넣는 파라미터와 같은 타입이라 그렇게 지정하면 되었는데 여기서는 약간 다르다. payloadAction이라는 타입을 import해와서 끼어 넣어주면된다. 맘대로증가라는 함수를 사용할때 숫자를 넣을것 같아 타입을 지정한것이다.
