[React_study] Redux store의 state 변경

* Redux의 state를 변경하는 단계

1. store.js에 state변경해주는 함수를 만든다.
2. export 해준다.
3. 필요할 때 import해주고 dispatch()를 이용해 사용한다.

---

* store의 state 변경하는 법 

1. store.js안에 state수정해주는 함수 만들기

• slice안에 reducers안에 함수를 만들면된다. (함수 작명은 마음대로 해도 된다.)
• 첫번째 파라미터안에 기존의 state가 담겨져 있다. (parameter name은 state로 사용한다.)
• return 우측에 새로운 state 입력하면 그 값으로 기존 state를 변경해준다.

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

 

 

2. 다른 곳에서도 유용하게 사용할 수 있게 export 해준다.

• slice이름.actions 라고 적으면 state 변경함수가 전부 그 자리에 출력 
• [참고] object Destructuring를 이용하여서 사용하기 좋게 만들어 준다.

export let { changeName } = user.actions 

 

3. 원하는 곳에서 import 해서 사용한다. 사용하려면 dispatch() 로 감싸서 사용해야한다.

• store.js에서 원하는 state변경함수 가져온다.
• useDispatch라는 라이브러리도 가져온다.
• dispatch(state변경함수()) 이런식으로 실행하여 state를 변경해준다.

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

const dispatch = useDispatch()
(생략) 

<button onClick={()=>{
  dispatch(changeName())
}}>Button</button>