[Redux] Redux 사용법 (2) - store, provider

Redux의 매커니즘

• slice에서 상태를 관리 
• store에서 slice를 관리 (이번편에서 다룰 내용)
• Provider로 컴포넌트 감싸기 (이번편에서 다룰 내용)
• 컴포넌트에서 store 호출해서 사용하기

✅ slice를 관리하는 store

store는 slice를 보관하고, 관리하는 저장소입니다.

getState(), useSelector() 를 통해 상태를 가져오고

dispatch를 통해 액션을 발송하는 역할을 합니다.

store 예제

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/user/userSlice";

export default configureStore({
  reducer: {userReducer},
});

이전편에서 만든 userSlice를 userReducer 라는 이름으로 불러오고

이 리듀서를 configureStore에서 reducer 속성에 저장합니다.

이제 user에 대한 상태를 관리하는 userSlice를 userReducer 라는 이름으로 컴포넌트에서 사용 가능합니다.

 

✅ Provider

store를 사용하고자 하는 컴포넌트들을 감싸줍니다.

이 컴포넌트들은 store를 사용할 수 있습니다.

ReactDOM.render(
  <Provider store={store}> 
    <User />
  </Provider>,
  document.getElementById('root')
)

 

⭐ 정리

1. store : slice를 보관, 관리하는 저장소

2. ~Slice를 ~Reducer 라는 이름으로 import 하는 규칙이 있습니다.

3. Provider로 slice를 사용할 컴포넌트를 감싸면 redux를 사용할 준비가 완료되었습니다.