Redux-saga를 학습하기 적당한 샘플 앱을 깃허브에서 찾았습니다. 이제 Twitter Clone 코딩을 하면서 Redux Saga에 익숙해져보겠습니다. 실제 앱에 어떻게 사용하는지를 파악하고 이론 공부를 병행하면 좀 더 쉽게 배울 수 있습니다. 혹시 이해가 안 되는 내용은 댓글에 질문하면 제가 답변하겠습니다.
- Twitter Clone App 사이트: https://startreact.com/themes/twitter-clone-app/
로그인 리듀서(Reducer) 정의하기
reducers.js에는 로그인에 필요한 State를 설계합니다. 아래 코드를 보면, 로그인 State는 username, password, loginStatus, user(Object) 데이터를 관리합니다.
그리고 나서 Reducer를 추가합니다. Reducer는 이전 상태와 액션을 받아서 다음 상태를 반환하는 함수입니다. Reducer 함수의 기본 구조는 (previousState, action) => newState 입니다. 아래와 같이 사용자ID 입력, 패스워드 입력, 로그인 요청, 로그인 성공, 로그인 실패에 대한 액션을 각각 정의합니다.
reducer(state = initialState)와 같이 초기 State를 initialState로 초기화합니다. 이 기능은 ES6에서 추가된 Default Parameters Syntax입니다. 그리고 리듀서에서 반환하는 Object ｛ ...state, username: action.payload ｝는 ES7의 Object Rest/Spread Syntax을 사용했습니다. 만약 ES6를 사용한다면 Object.assign(state, ｛ username: action.payload ｝)로 작성하면됩니다.
Redux Saga 액션(Action) 정의하기
sagas.js에는 Redux Saga에서 수행할 액션을 정의합니다.
그 다음 `sagas.js`에 액션에 대한 watch를 추가합니다. watch는 Store로 dispatch되는 모든 액션들을 잡아내서 처리할 것입니다.
parallel로 처리하기 위해서 watch를 모두 all 함수에 담아 export 합니다. 여기에 사용된 all은 Promise.all과 비슷합니다.
리듀서(Reducer) Store 정의하기
마지막으로 store.js에 store를 생성합니다. 그리고 sagaMiddleware를 생성하여 store에 추가합니다. 그다음 rootSaga를 실행합니다.
Redux-saga 사용하기
App.js에서는 앞에서 생성한 Store를 import 합니다. 그리고 Provider를 사용하여 Store를 App에 주입합니다.
그리고 로그인 화면 screens/login.js을 생성합니다.
마지막으로 LoginScreen 컴포넌트를 Reducer에 연결(connect) 합니다.
이렇게 Resux-saga를 사용하여 action, state, view를 분리하였습니다. 로그인 기능 하나 만드는게 많은 파일과 코드를 생성해야합니다. 다음에 같은 기능을 mobx나 apollo-graphql 로도 구현해봐야겠습니다.
