Redux toolkit 다중 slice 사용

다중 슬라이스 사용법은 뭐가 다른지 보자.

우선 store/index.js 에서
createSlice를 하나 더 만들준다.

여기서 한 번 더 집고 가야할 점은, Slice가 여러개라도 configureStore는 한번 호출 해야 한다는 점.

export default store = configureStore({
	reducer: { counter: counterSlice.reducer, auth: authSlice.reducer },
})

export const counterActions = counterSlice.actions;
export const authActions = authSlice.actions;

나중에 이 개별 리듀서들은 하나의 주요 리듀서로 자동으로 합쳐질 것이다.

이렇게 액션까지 export 해주었다.

이렇게 하면 아까와 경로가 좀 달라졌다. Counter.js에서 useSelector 안에 state에 접근할 때 식별자를 이용해 특정 상태 slice에 접근해야 한다.

//원래 코드
const counter = useSelector((state) => state.counter)

//다중 슬라이스로 바뀌고 나서 코드
const counter = useSelector((state) => state.counter.counter)  // 마지막 counter가 프로퍼티이다. (스냅숏)

//이건 App.js에서 사용
const auth = useSelector((state) => state.auth.isAuthenticated)

이렇게 사용된다고 한다.
다중 슬라이스 정말 벌써 복잡하네 ㅠ