리액트 네이티브 앱 제작 원론. 6장 NYT API와 리덕스의 통합

NYT API (http://developer.nytimes.com/)

이름과 이메일만 일러주면 시원하게 API Key를 보내줍니다.

https://api.nytimes.com/svc/topstories/v2/technology.json?api-key=5b21804f73ce4fe7a23e518ae7c4e9a4

결과물 (https://github.com/utrpanic/today-what-else/tree/react-native-ch6/ReactNative/RNNYT)

시키는대로 샘플만 따라하다보니 전체 그림이 보이질 않습니다. 요소들을 하나씩 짚어보고 코드만 봐서는 이해가 안가는 부분의 문서를 참조하겠습니다.

Store

• Redux 애플리케이션은 오직 하나의 store만 갖습니다. 애플리케이션의 state tree를 관장합니다. Dispatch action을 통해서만 state를 변경할 수 있습니다. 
• createStore()의 파라미터로 root reducing function을 넘겨줍니다. reducer를 여러 개 구현하였기 때문에, combineReducers()를 이용해서 하나로 묶어줍니다. 각 reducer로부터 리턴받을 state 이름을 함께 명시하고 있습니다. 
• Middleware는 reducer보다 먼저 action을 전달받아 각각의 기능 수행 후, reducer에게 action을 전달합니다.
• https://github.com/utrpanic/today-what-else/blob/react-native-ch6/ReactNative/RNNYT/src/createStore.js
• https://redux.js.org/api-reference/createstore
• https://redux.js.org/api-reference/combinereducers
• https://redux.js.org/api-reference/applymiddleware

Action

• 샘플코드에서는 type과 payload로 구성되어 있습니다. Action이라는 타입이 따로 있는 건 아닌데, 보통 identifier와 data로 구성하지 않나 추측해봅니다.
• 계속 헷갈렸는데, loadNews는 action이 아니라 LOAD_NEWS type의 action을 생성하는 함수입니다.
• redux-promise를 이용해서 remote api response를 비동기처리하고 있습니다. Payload가 promise가 아니면 action을 다음 미들웨어에게 전달하고, promise이면 promise가 해석될 때까지(response를 받을 때까지) 전달을 보류합니다. Payload는 redux-promise가 정의하고 있는 key 입니다.
• fetch()의 파라미터는 `로 감싸져있습니다. ES6의 template 입니다.
• https://github.com/utrpanic/today-what-else/blob/react-native-ch6/ReactNative/RNNYT/src/actions/newsActions.js

Reducer

• State와 action을 파라미터로 전달받은 후, action type에 따라 state를 return 합니다. 입력받은 state를 변경해선 안되고, 변경이 필요하면 새로운 state를 생성해서 return해야합니다.
• https://github.com/utrpanic/today-what-else/blob/react-native-ch6/ReactNative/RNNYT/src/reducers/newsFeedReducer.js

Container

• 애플리케이션 state tree에서 어느 정보를 component가 subscribe할 것인지 지정하고, component가 발생시킬 action의 creator를 property로 할당합니다.
• https://github.com/utrpanic/today-what-else/blob/react-native-ch6/ReactNative/RNNYT/src/containers/NewsFeedContainer.js
• https://redux.js.org/api-reference/bindactioncreators
• https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options