src에 reducers 폴더를 만들고 userReducers.ts 파일을 만들어 다음과 같이 입력합니다.
import { LOGIN_SUCCESS, UserActionTypes, UserData } from '../types/user';
// 초기 상태 정의
const initialState: UserData | null = null;
// 리듀서 함수 정의
const userReducer = (state = initialState, action: UserActionTypes): UserData | null => {
switch (action.type) {
case LOGIN_SUCCESS:
return action.payload;
default:
return state;
}
};
export default userReducer;
코드에 대해서 자세하게 알아보겠습니다.
초기 상태 정의
리듀서의 초디 상태를 정의합니다
initialState는 UserData 또는 null 상태가 될 수 있고, null 상태로 초기화 합니다.
리듀서 함수 정의
state는 현재 상태를 나타매녀, 초기 상태로 초기화 됩니다.
action은 디스패치된 액션 객체를 나타냅니다
switch 문을 이용하여 액션 타입에 따라 적절한 동작을 수행합니다.
로그인 성공 액션이 발생하면 액션의 playload를 반환하여 사용자 데이터를 업데이트 합니다.
스토어 정의하기
src에 store.ts 파일을 만들고 다음 코드를 입력합니다.
import { combineReducers, createStore } from 'redux';
import userReducer from './reducers/userReducer';
import { UserData } from './types/user';
// 루트 상태 정의
export interface RootState {
user: UserData | null;
}
// 루트 리듀서
const rootReducer = combineReducers({
user: userReducer,
});
// 스토어 생성
const store = createStore(rootReducer);
export default store;
코드에 대해서 자세하게 알아보겠습니다.
루트 상태 정의
RootState 인터페이스는 애플리케이션의 루트 상태를 정의합니다.
user 상태는 사용자 데이터를 포함하거나 또는 null일 수 있습니다.
루트 리듀서 결합
combineReducers 함수를 사용하여 루트 리듀서를 생성합니다.
스토어 생성
createStore 함수를 사용하여 스토어를 생성합니다.
루트 리듀서를 스토어에 전달합니다.
Provider 설정
App.tsx에 다음과 같이 Provider를 설정합니다.
import {Provider} from 'react-redux'
import store from './store'
export default function App() {
return (
<Provider store={store}>
...
</Provider>
)
}
리덕스를 사용하기 위해서는 프로바이더를 설정해야 합니다.
Provider 컴포넌트는 리액트 애플리케이션에 리덕스 스토어를 제공하는 역할을 합니다. 리덕스를 사용하는 리액트 애플리케이션에서는 모든 컴포넌트가 스토어에 접근하여 상태를 읽거나 업데이트 할 수 있어야 하고, 이를 가능하게 해주는 것이 Provider입니다. Provider 하위에 있는 모든 컴포넌트가 Redux에 접근할 수 있게 되는 것이죠.