[React Native] Redux-Saga 학습하기 #2
안녕하세요. 안피곤입니다.
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 로도 구현해봐야겠습니다.
댓글
, 팔로우
, 좋아요
해 주시는 모든 분께 감사합니다.
항상 행복한 하루 보내시길 바랍니다.
kr-newbie님이 anpigon님을 멘션하셨습니당. 아래 링크를 누르시면 연결되용~ ^^
kr-newbie님의 [8/9 kr-newbie 큐레이팅 프로젝트] 오늘은 @hodolbak-aaa님의 [한줄리뷰이벤트]를 소개해볼게요
Thank you for your continued support towards JJM. For each 1000 JJM you are holding, you can get an additional 1% of upvote. 10,000JJM would give you a 11% daily voting from the 700K SP virus707 account.
안피곤님 화이팅~!!!
먼얘긴지는 잘 모르겠습니다 하하
부기님도 화이팅입니다. ㅎㅎ
sct1004님이 anpigon님을 멘션하셨습니당. 아래 링크를 누르시면 연결되용~ ^^
sct1004님의 sct 천사 8월 8일,9일 활동
wonsama.zzan님이 anpigon님을 멘션하셨습니당. 아래 링크를 누르시면 연결되용~ ^^
wonsama.zzan님의 [ZZAN] DAILY REPORT 2019.08.09
제 맘대로 홍보하고 풀봇합니다. 게시판 너무 좋아요. 생각하고 만드시느라 고생하셨습니다. 짠유저로 제 맘대로 홍보하고 풀봇합니다. 4회 중 3번 하였습니당.
감사합니다.
Hi @anpigon!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 3.420 which ranks you at #7424 across all Steem accounts.
Your rank has not changed in the last three days.
In our last Algorithmic Curation Round, consisting of 157 contributions, your post is ranked at #67.
Evaluation of your UA score:
Feel free to join our @steem-ua Discord server