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

 

 

 

Redux store의 state 변경하는 법

Redux의 state 변경은 state 수정해 주는 함수를 만들어 두고 컴포넌트에서 원할 때 그 함수를 실행해 달라고 요청하는 방식.

1. store.js에 state 변경해 주는 함수 생성

2. export 하기

3. 필요할 때 import 해서 dispatch()로 감싸서 사용

 

---

 

1. store.js에 state 변경해 주는 함수 생성

(Store.js)
let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
})

 

createSlice() 안에 reducers : { } 열고 안에 함수를 만든다.

• 함수 작명은 자유롭게 가능하다.
• 파라미터 하나 작명하면 그것은 기존 state가 된다.
• return 우측에 새로운 state 입력하면 그걸로 기존 state를 수정해 준다.

이제 changeName() 쓸 때마다 'kim' → 'john kim' 으로 될 것이다.

 

 

2. export 하기

(Store.js)
export let { changeName } = user.actions
//export let { 함수1, 함수2, ... } = user.actions

 

store.js에 slice이름.actions라고 적으면 state 변경 함수가 전부 그 자리에 출력된다.

그걸 변수에 저장했다가 export 하라는 뜻이다.

 

 

3. 필요할 때 import 해서 dispatch()로 감싸서 사용

예를 들어 Cart.js에서 버튼을 누르면 state를 'kim' → 'john kim' 이렇게 변하고 싶다면

(Cart.js)

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

function Cart(){
	let state = useSelector(( state ) => { return state});
	let dispatch = useDispatch();
    return (
        <div>
            {state.user}의 장바구니
            <button onClick={()=>{
              dispatch(changeName())
            }}>버튼</button>
        </div>
    )
}

export default Cart;

 

1. store.js에서 원하는 state 변경 함수를 import 해서 가지고 온다.
2. useDispatch를 라이브러리에서 import 해서 가지고 온다.
3. dispatch( state변경함수() )로 state변경함수()를 dispatch()에 감싸서 실행한다.

 

---

 

이렇게 store 안에 있는 state를 수정하고 싶으면

- state 수정해 주는 함수를 미리 store.js에 만들어 두고

- 컴포넌트는 그걸 부르기만 하는 방식으로 state 수정하게 되어 있다.

 

길고 복잡하지만 사실 좋은 방식이다.

 

(좌) state 수정 직접 변경하는 방식 (우) sate 수정 함수 호출하는 방식 / 이미지 출처 코딩 애플

 

컴포넌트 100개에서 직접 'kim'이라는 state를 변경하다가 갑자기 'kim'이 123이 되어 버리는 버그가 발생하다면 범인을 찾으려고 컴포넌트를 100개 다 찾아봐야 한다.

그러데 state 수정 함수를 store.js에 미리 만들어 두고 컴포넌트는 state 수정 함수를 실행해 달라고 부탁만 하는 식으로 코드를 작성해 놓으면  'kim이 123이 되어 버리는 버그가 발생했을 때 범인 찾기가 훨씬 수훨하다. 범인은 무조건 store.js 안에 있으니까. 

 

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.