1. Redux ToolKit
Redux는 React.js 애플리케이션에서 사용되는 상태 관리 라이브러리로 store를 통해 전역의 state를 관리하고 저장한다. 여기서 더 확장된 RTK는 리덕스(Redux) 상태관리 라이브러리를 사용하기 쉽고 효율적으로 코드를 작성할 수 있도록 돕는 패키지이다.
1) redux와 RTK의 차이
분류 | Redux | RTK
| :- | :: | :: |
코드량 | 많은 코드 양 | 적은 코드 양
Immutable 추가 | Immutable 업데이트 미지원 | Immutable 업데이트 지원
createSlice 함수 추가| 상태, 액션, 리듀서를 각각 개별적으로 작성 | createSlice 함수로 상태, 액션, 리듀서를 한 번에 생성
configureStore 함수 추가 | 스토어 생성 코드를 따로 작성 | configureStore 함수로 스토어 생성 코드 자동 생성
기본적인 미들웨어 포함 | 기본 미들웨어 미포함 | 몇 가지 기본 미들웨어 포함
2) 메서드 정리
메서드 설명 |
| :- | :- |
configureStore() | Redux Store를 구성하는 메서드로, reducer 및 middleware를 설정하고 store를 반환
createReducer() | 일반적인 reducer 함수를 작성하는 데 사용
createAction() | 일반적인 액션 생성 함수를 작성하는 데 사용
createSlice() |Redux Toolkit에서 reducer를 작성하는 유틸리티 메서드로 초기 상태 및 reducer 함수를 정의하고, 액션 생성 함수 생성.
createAsyncThunk() | 비동기 작업을 수행하는 Action Creator를 생성
createEntityAdapter() | 비정규화된 엔티티 데이터를 쉽게 관리
createSelector() | Reselect 라이브러리와 함께 사용하여 성능 최적화된 셀렉터를 생성
useSelector() | Redux store에서 state를 불러오는 메서드
useDispatch() | Redux store에서 action을 dispatch하는 Hook으로 컴포넌트에서 Redux store의 state를 변경
2. Store & Slice 구성 및 Provider 설정
state의 초기값을 설정하고 state에 맞는 action을 세팅한다.
//userSlice.ts
import {createSlice} from '@reduxjs/toolkit';
const initialState = {
nickName: '',
email: '',
userId: '',
accessToken: '',
};
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
// 모든 사용자 정보 저장
setUser(state, action) {
state.nickName = action.payload.name;
state.email = action.payload.email;
state.userId = action.payload.userId;
},
setNickName(state, action) {
state.nickName = action.payload;
},
setEmail(state, action) {
state.email = action.payload;
},
setUserId(state, action) {
state.userId = action.payload;
},
setAccessToken(state, action) {
state.accessToken = action.payload;
},
},
});
export const {setUser, setNickName, setEmail, setUserId, setAccessToken} = userSlice.actions;
export default userSlice;
애플리케이션 상태를 담고 있는 객체인 Store를 구성한다.
//store.ts import {configureStore} from '@reduxjs/toolkit'; import userSlice from './userSlice'; const store = configureStore({ reducer: { user: userSlice.reducer, }, }); export default store;
App 페이지 최상위에 Provider로 스토어를 등록한다.
//최상위 app.tsx
import {View, StyleSheet} from 'react-native';
import {NavigationContainer, DefaultTheme} from '@react-navigation/native';
import {AuthStack} from './src/navigations/StackNavigator';
import {Provider} from 'react-redux';
import store from './src/util/redux/store';
const App = () => {
return (
<Provider store={store}>
<NavigationContainer
theme={{
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: 'white',
},
}}
independent={true}>
<View style={styles.container}>
<AuthStack />
</View>
</NavigationContainer>
</Provider>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
});
3. Redux Toolkit으로 state 관리하기
이전 splash와 login screen에서 AsyncStrage에 토큰 정보를 저장했는데 로그인 시 사용될 userId와 nickname, email, Authorization bearer token에 전달할 accessToken을 전역 state에 저장하여 유저 정보가 포함된 모든 요청에 가져와서 사용한다.
// login.tsx
//...중략
import {useDispatch} from 'react-redux';
import {setUserId, setAccessToken} from '../../util/redux/userSlice';
const dispatch = useDispatch();
const loginAuth = async () => {
if (url !== undefined) {
try {
const response = await axios.post(`${url}api/v1/users/login`, data);
const {accessToken, refreshToken, userId} = response.data;
// 자동 로그인 정보 수집
if (autoLogin) {
await storageSetValue('tokens', {accessToken, refreshToken});
} else await storageDeleteValue('tokens');
// store에 userId와 토큰 저장
dispatch(setUserId(userId)); // userId 저장
dispatch(setAccessToken(accessToken)); // 엑세스토큰 저장
//메인화면으로 이동
navigation.navigate('MainTab');
} catch (error: any) {
navigation.reset({routes: [{name: 'Login'}]});
}
}
};
//component.tsx
import {useSelector} from 'react-redux';
const user = useSelector((state: any) => state.user);
console.log(user);
/* {
accessToken: 'your accessToken',
email: '',
nickName: '',
userId: 1,
}; */