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

1. store 내에서 변경함수 만들기

let user = createSlice({
    name:'user', //이름
    initialState:'kim', //초기값
    //변경함수 만들기
    reducers:{
        setUser(state){ //state : 기존 초기값 state를 의미
            return 'john' + state
        }
    }
})

위의 코드에서

reducers : 이부분이 변경함수 만드는 곳 이다

reducers 안에서 setUser라는 이름의 변경함수 만들면 그 안의 return이 출력되는 것!

변경함수의 파라미터로 들어가있는 state는 초기값 ' kim '을 의미

 

 

2. 만든 변경함수 export 해야함

함수이름.actions 라고 쓰면 변경함수인 reducers가 남음

//export let {변경함수이름} = 함수이름.actions
export let {setUser} = user.actions

 

 

 

3. 컴포넌트에서 원할때 import 해서 사용하면된다. (그냥 사용하지 않고 dispatch( ) 안에 넣어서 사용!)

먼저 변경함수 import 하고

//store에서 state 변경함수 가져옴
import {setUser} from '../store'

 

 

버튼 누르면 변경함수 실행되게 코드짜야함

<button onClick={()=>{
	dispatch(setUser())
}}>이름바뀜</button>

 

 

store.js 안에서 수정(변경)함수 미리 만들고

수정함수를 써야하는 컴포넌트가 store.js 한테 수정함수 필요하다고 dispatch로 부탁?하는 개념

즉, 실행함수를 컴포넌트가 실행하는것이 아니라 부탁받은 store.js가 실행하는 것

여러개의 컴포넌트가 store.js 한테 수정함수 실행해달라고 부탁하기때문에

나중에 수정함수에서 버그가 나도 추적하기가 쉬움

왜? 수정함수 만들어 놓은 store.js만 뒤지면 되니깐~