[Redux] Counter 만들기

이썸이·2024년 5월 16일

redux

1. 리덕스 설정 파일 만들기

createStore()
- store를 만드는 메서드
- 리덕스는 단일 store로 모든 state를 관리 → 호출할 일은 한번 뿐일것..
- combineReducers()
  - 🔍 combine : 결합하다
  - 리덕스는 action → dispatch → reducer 순서로 동작하는데, 앱이 복잡해지면 reducer 부분을 나눠야해서 복잡해 질 수 있음
  - 그래서 combineReducers() 를 통해 여러개의 독립적인 reducer의 반환값을 하나의 상태 객체로 만듬

2. 최상위 디렉토리의 `index.js` 에서 App을 Provider로 감쌈

vite로 리액트 앱을 만들었더니 나는 최상위 파일 이름이 main이다. 이름이 중요한 건 아니고 그냥 최상위에 있는 파일을 수정하면 됨
App을 react-redux의 Provider로 감싸주고
위에서 만든 설정파일의 store를 Provider의 store로 넣어주면 됨

3. 모듈 만들기

모듈 : state의 그룹
initalState : 초기값
- useState 에서 넣어주는 초기값과 동일하게 생각하면 됨
```
const [state, setState] = useState(initailState)
```
counter : 리듀서
- 리듀서 : 변화를 일으키는 함수
- 어떤 값을 어떻게 변화시키는 함수
  - state, action 을 받음

4. 모듈과 스토어 연결하기

위에서 만든 모듈(counter)를 combineReducers() 에 넣어 연결하기
```
  
```

5. 스토어와 모듈 연결 확인하기

useSelector() 를 이용하여 컴포넌트에서 스토어를 직접 조회해 볼 수 있음

useSelector 사용법

     // 1. store에서 꺼낸 값을 할당 할 변수 선언
     const number = 
     
     // 2. useSelector()를 변수에 할당
     const number = useSelector()
     
     // 3. useSelector의 인자에 화살표 함수를 넣어줌
     const number = useSelector(() => {})
     
     // 4. 화살표 함수의 인자에서 값을 꺼내 return
     const number = useSelector((state) => { return state })
     ```

App.jsx 에 useSelector() 사용
- state 에는 내가 만든 모든 리덕스 모듈의 state가 있고(지금은 counter 하나만 만들어서 연결해뒀기 때문에 counter만 보임) → 화살표 함수에서 꺼낸 state 라는 인자는 현재 프로젝트에 존재하는 모든 리덕스 모듈의 state
- 그 중에서 사용할 state만 뽑아서 사용하면 됨

6. 모듈 state 수정 기능 만들기

useState() 를 사용했다면?

const [number, setNumber] = useState(0)

const handleClick = () => {
	setNumber(number+1)
}

리덕스에서는 state를 reducer를 통해 변화시킬 수 있음
- 리듀서에게 number+1 을 하라는 명령을 만들고
- 이 명령을 리듀서에게 보내서
- 리듀서는 이 명령을 받아 number+1을 한다
명령(액션 객체) 보내기
- 액션 객체에서 type은 필수값임
- type은 꼭 대문자로 작성해야 함
- useDispatch() 사용
- 이렇게 보내면 reducer에서는 어떻게 받을까? → 콘솔에 찍어봄
- 보내준 액션 객체가 잘 들어왔음
이제 state를 변화시켜 보자
- 근데 state가 { number: 0 } 형태의 객체이기 때문에 반환도 같은 형태의 객체로 해줘야하며, App.jsx 에서 사용하는 useSelector에서도 약간의 코드 수정이 필요하다
```
  
```

정리

액션 객체는 반드시 type이라는 key를 가져야하는 객체이며 리듀서로 보낼 명령임

action 객체의 필수값은 type이고, payload는 선택적이며 이름 또한 자유롭게 바꿀 수 있음

reducer에서 사용하는 객체가 단순히 action 객체인가? 에 대해 궁금해졌는데 정확히는 type이라는 키를 가진 객체가 action 객체라고 함

이러면 위에서 말한 action 객체의 필수값이 type이 될 수 밖에 없겠군

redux의 깃 레포를 좀 봤더니 아예 isAction() 이란 함수로 타입 체크를 하는 거 같다

dispatch란 액션 개체를 reducer로 보내는 전달자 함수임

reducer란 dispatch를 통해 전달받은 액션 객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는(= 변화를 만들어내는) 함수