React - Redux(3) Redux의 state변경하는법

Redux의 state를 변경하고 싶으면 변경하는 법이 따로 존재합니다.

1. store.js에 state 변경해주는 함수부터 만들어주고

2. export 해두고

3. 필요할 때 import 해서 쓰면 되는데 dispatch()로 감싸서 써야합니다. 

 

Q. 컴포넌트에서 state 직접 수정하면 편하지 않나요?

당장은 편할수는 있어도 프로젝트가 커지면 심각한 단점이 발생할 수 있습니다.

컴포넌트 100개에서 직접 'kim'이라는 state 변경하다가 갑자기 'kim'이 123이 되어버리는 버그가 발생하면 

원인을 찾기 위해 컴포넌트 100개를 다 뒤져야합니다.

 

하지만 아래처럼 state 수정함수를 미리 만들어놓고 

컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜 놓으면 버그가 발생했을때 이유 찾기가 수월해집니다.

이유는 무조건 store.js에 있을 수 밖에 없기 때문(잘 만들었다면)

 

store의 state변경하는 법

state 수정해주는 함수부터 store.js에 만들어두고 그걸 컴포넌트에서 원할 때 실행하는 식으로 코드를 짜야합니다.버튼누르면 예전에 'kim'이라고 저장해놓은걸 'john kim'으로 수정하고 싶으면 

 

1. store.js 안에 state 수정해주는 함수부터 만듭니다. 

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

slice안에 reducers : { } 열고 거기 안에 함수를 만들면 됩니다. 

• 함수 작명은 마음대로 합니다. 
• 파라미터 하나 작명하면 그건 기존 state가 됩니다.
• return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아치워줍니다. 

아래처럼 함수 2개.. 여러개를 작성할 수 도 있습니다. 

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

콘솔로 확인해보면 

import {changeName, temp} from "./../store.js"
console.log(changeName());
console.log(temp());

둘다 잘 출력됩니다. 

 

2. export

이제 다른곳에서 쓰기 위해 export해줍니다. 

아래의 코드를 store.js 밑에 추가하면 됩니다. slice이름.actions라고 적으면 state 변경함수가 전부 그 자리에 출력됩니다. 

export let { changeName } = user.actions

2개.. 여러개를 전송할 수 도 있습니다.

export let {changeName, temp} = user.actions

 

 

 

3. 원할 때 import(dispatch() 필수)

버튼을 하나 만들고 그 버튼 누르면 state를 'kim' -> 'john kim'이렇게 변경하고 싶으면 

아래처럼 코드를 작성합니다. 

(Cart.js)

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

(생략) 

let dispatch = useDispatch()
...
<button onClick={()=>{
  dispatch(changeName())
}}>버튼</button>

• store.js에서 원하는 state변경함수 가져오고 
• useDispatch라는 것도 라이브러리에서 가져옵니다.
• 마지막으로 dispatch( state변경함수() ) 이렇게 감싸서 실행하면 state가 진짜로 변경됩니다. 

처음 실행화면입니다.

변경하기 아래의 + 버튼을 클릭해보겠습니다.

아래처럼 kim -> john kim으로 잘 변경됩니다. 

 

 

정리

store(Redux)안의 state를 수정하고 싶으면 

• state 수정해주는 함수를 store.js에 만들어두고
• 컴포넌트는 그걸 부르기만 하는 식으로 state를 수정