조금 더 익숙해진 Redux-Toolkit(사용하기)

Redux-Toolkit?

Redux보다 조금 더 수월하게 적용할 수 있다.

각 폴더에 import 해야할 부분은 생략함....

 

1. 먼저 상태를 저장할 store인 slice를 만들어보자

redux와 같이 상태를 저장하는 store가 있다. 

하지만 redux와 다르게 하나의 store에 저장하지 않고 각각의 작은 store를 생성해 저장한다.

(이후 이 작은 store를 하나의 큰 스토어(combineStore로 묶는다)

이 작은 store는 createSlice()로 만든다.

이 slice에는 객체로 name과  초깃값(initionState), reducers가 들어간다.
먼저 name은 말그대로 사용할 이 slice의 이름을 임의로 지정해준다.

다음으로 초깃값은 상태가 변경되기 전 초기의 값을 설정해준다.

마지막으로 reducers!! (reducer 단수가 아니다 복수다!)

reducers 안에는 여러개의 reducer를 만들수 있고,

reducer에는 state를 변경할 각각의 함수가 들어간다.

이 함수에는?! 인자로 (state, action)을 받는다.

전달 받은 state는 state.action로 받는다.

export는 각자 편하게!!

이렇게 생성된 각각의 작은 저장소 slice를 combineReducers()에 담는다.

여기까지가 redux-toolkit으로 상태를 저장할 store를 만든 것!

 

2. 변경할 상태 store로 보내기!

상태로 관리할 데이터를 useDispatch를 사용해서 store에 보낸다.

dispatch(export한 slice 이름.reducers안에 설정한 함수명(관리할 상태 값)) 이런식으로 쓸 수 있음!

 

3. store에 저장된 상태 불러와 사용하기!

store에 저장된 상태는 사용할 곳에 useSelector로 가져와 쓸 수 있다.

이렇게 가져온 상태를 weekData라는 변수에 담아 내가 원하는 곳에 써주면 끝!

 

 

 

 

/* 공부 중이라 틀린 내용이 있을 수 있으니 언제든 교정 부탁드립니다 :) */