[React] Redux store의 state 변경하는 방법

 

 

 

💡 store의 state 변경하는 방법

---

 

Redux 의 state 변경하는 법

1. state 수정 해주는 함수를 만들어 준다.

2. 그 함수에 해당하는 변경을 원할 때 함수를 실행해 달라고 store.js에 요청한다.

 

 

 

🔍 Step 1. state 수정해주는 함수 만들기

creatSlice 에서 변경함수를 추가해 주면 된다.

changeName 은 작명한 이름이다.

원래는 kim 을 john kim 으로 바꾸는 코드인데

작명한 changeName 파라미터 값이 기존 initialState 에 들어있는 데이터 값이다

기존 state 를 파라미터를 이용해서 사용이 가능하다.

 

따라서 'john'+ state 해도 'john kom' 과 동일하다.

 

 

 

🔍 Step 2. 만든 함수 export 해야 함.

바로 changeName 만 export 하면 편하겠지만 그렇게는 불가낭혹

 

actions

 

라는 것을 이용해서 함수 state를 모두 담을 수 있다.

 

여기에서 

 

user.actions 를 통해서 reducers의 changeName을 모두 받아올 수 있다.

이를 구조분해(distructuring)을 통해서 changeName 만 export 해줄 수 있다.

 

 

여기서 다른 함수들이 더 추가된다면?

user.actions 를 통해서 한번에 export 해주면 된다.

 

 

🔍 Step 3. 만든 함수 import 해서 사용해준다.

 

일단 당연히 export 했던 changeName 함수는 import 해주고

 

거기에 useDispatch() 함수를 함께 import 해준다.

useDispatch 는 store.js 로 요청을 보내는 함수이다.

 

따라서 changeName 이라는 함수를 사용 할게요!! 라고 다시 store.js에 요청을 하도록

 

useDispatch 함수를 사용해 줘야 한다.

 

useDispatch 함수를 dispatch 에 담고

 

onClick 했을 때 changeName을 사용할래요!! 라고 요청을 보내면 되는 것이다.

import 해온 changeName 변경함수를 dispatch에 실어서 요청을 날리는 것이다.

이 부분을 살펴보면 

import 해온 changeName 이 john kim 으로 바꾸도록 설정 해뒀다.

 

즉 onClick을 통해 dispatch에 changeName 요청을 날리면

이렇게 바로 적용이 된다.

 

 

💡다시 간단 요약!

---

Redux state를 변경하기 위해서는!

 

1.state 변경해주는 함수를 createSlice에 만들어 주고

2. actions 를 통해 바깥으로 변경함수를 꺼내주고 export를 해준다

3.변경하고 싶을 때 dispatch(변경함수()) 와 같은 구조로 dispatch에 실어서 변경함수를 요청하면 된다.

 

 

 

 

💡 Redux 방식의 특징(왜 이렇게 복잡하게 작동하나요?)

---

 

프로젝트의 사이즈가 커지면 이러한 변경 관련 함수를 store 에서 만들고 다른 파일들은 요청 하는 방식이

 

버그를 찾고 관리 하는데 훨씬 용이하다.

 

 

예를 들어서 컴포넌트가 10개 20개 된다고 가정을 해봅시다!

만약 store.js 에 저장된 state 들의 값을 마음대로 변경이 가능하다면

 

갑자기 버그가 났을 때 이러한 현상을 만든 범인을 찾을 때 매우 어렵다.

 

하지만 state 수정 함수를 미리 만들어 놓고 다른 컴포넌트 함수들은 수정함수를 부르는 식으로만 쓰면

 

오류가 났을 때 store.js 만 체크해보면 되어서 훨씬 관리하기 용이해진다.

 

 

 

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/