Redux

리덕스 도입을 주저하게
만드는 장벽들
에어비앤비 박호준
Feb. 2020

Hi there, we are Propel.
We’re Airbnb’s emerging tech
R&D team.
Team overview

오늘의 주제:
에너미 오브
스테이트

형상 관리가 힘든 가장 큰 이유는
바로 데이터의
복잡성
state management

형상 관리 Forms Routing Inputs
Tabs Filters
Menus Navigations Notiﬁcations
Error states
Loading states
데이터

과
거
현
재
미
래
에어비앤비
상태 관리의
역사
Alt Redux Apollo
Graphql
(~2017) (2017~2020) (2019~)

MobX 대신 Redux를 선택한
이유
에어비앤비가

MobX
● 반응형 프로그래밍 패러다임 (Reactive)
● 상태 관찰(Observable) 형태의
형상관리
액션 상태 반응
변경 파생
참조: slideshare.net/hyunseoblee7/mobx-mst-state-management-109460634

● @observable
● @computed
● @action
● runInAction
● @observer
MobX참조: slideshare.net/hyunseoblee7/mobx-mst-state-management-109460634

단점
● 서버에서 받아온 자료를
호환 가능한 자료로
변환해야함
● 계층 구조가 깊어질수록
Deserialize 지옥
(Observable Array = hell)
● 에러 컨트롤
MobX
장점
● 단순하고 이해하기 쉬움
● 간편한 비동기 처리
● 클래스와 연결 용이
참조: slideshare.net/hyunseoblee7/mobx-mst-state-management-109460634

Flux해버렸지!
Data Down Action Up

Redux란?
● 단방향(Flux) 형상 관리 도구
● 컨텍스트와 유사

액션 ● 무엇을 할지만 정의하고 어떻게 처리하는지는 포함하지
않음

리듀서
● 이전 리덕스 스토어 상태와 액션 값으로 새 상태를 생성하는 순수
함수
function reducer(prevState, action) {
return prevState + action.payload;
}
prevState
newState

비동기 제어
미들웨어 선택 장애

redux-saga
redux-actions
redux-observable
...
pure
middleware vs

redux-saga 최고임!
Reactive 대세임!

react-thunk: 액션
fuction apiAction() {
redux.dispatch({type: LOADING});
Api.get(‘search’).then(response =>
redux.dispatch({type: LOAD, payload: response});
).catch(error=>
redux.dispatch({type: ERROR, payload:error});
);
}

react-thunk: 액션 (중복 호출 방지)
let xhr;
fuction apiAction(params) {
if (xhr) xhr.abort();
redux.dispatch({type: 'START'});
xhr = Api.get(‘search’, params).then(response =>
redux.dispatch({type: 'SUCCESS', payload: response});
).catch(error=>
redux.dispatch({type: 'ERROR', payload:error});
).finally(() => redux.dispatch({type: 'FINISH' });
}

redux-saga: 중복 호출 방지
function* sagaAction(params) {
yield put({type: 'START'});
try {
const response = yield call(Api.get, 'search', params));
yield put({ type: 'SUCCESS', payload: response })
} catch (err) {
yield put({type: 'ERROR', payload:error });
} finally {
yield put({type: 'FINISHED' });
}
}
function* takeLatestSagaAction() {
yield takeLatest('REQUEST_ACTION', sagaAction);
}

redux-observable: 중복 호출 방지
(action$) => action$.ofType('REQUEST_ACTION')
.map(action => action.payload)
.switchMap(payload =>
Observable.merge(
Observable.of({type: 'START'}),
Api.get(‘search’)
.map(response => { type: 'SUCCESS', payload: response })
.catch((error) => Observable.of({type: 'ERROR', payload: error }))
),
);

redux-saga: 연쇄 효과
function* notificationAction() {
yield put({ type: 'SHOW_ERROR'});
}
function* hideAction() {
yield put({ type: 'HIDE_ERROR'});
}
function* hideAfter4s() {
yield debounce(4000, 'HIDE_ERROR', hideAction);
}
function* takeLatestSagaAction() {
yield takeEvery('ERROR', notificationAction);
}
function* hideNotificationAction() {
yield takeLatest('SHOW_ERROR', hideAfter4s);
}

로그인 창 하나 붙이는 데...
redux-form
redux-saga
reducer
action
redux

미들웨어, 어디까지
살펴보았나요?

미들웨어
function middleware(store) {
return function (nextRunner) {
return function(action) {
// 리듀서 전
const result = nextRunner(action);
// 리듀서 후
return result;
}
}
}

redux-thunk는 무엇인가요?
const thunk = (store) => (nextRunner) => (action) => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState);
}
return nextRunner(action);
};

react-pack은 무엇인가요?

redux-pack: 액션
function fetchResource() {
return (dispatch) => {
dispatch({ type: 'START'}),
Api.get('/resource').then(
data => dispatch({ type: 'SUCCESS', payload: data }),
error => dispatch({ type: 'ERROR', payload: error }),
).finally(
() => dispatch({ type: 'FINISH' });
);
}
}
return {
type: 'REDUX_PACK',
promise: Api.get('/resource')
};
}

redux-pack: 리듀서
import { handle } from 'redux-pack';
export function packReducer(state, action) {
const { type, payload } = action;
if (action === 'REDUX_PACK') {
return handle(state, action, {
start: prevState => ({
...prevState, loading: true,
}),
success: prevState => ({ ...prevState, payload }),
failure: prevState => ({
...prevState, error: true,
}),
finish: prevState => ({
...prevState, loading: false,
}),
});
}
return state;
}
export function reducer(state, action) {
switch(type) {
case: 'START': {
return { ...state, loading: true };
}
case: 'SUCCESS': {
return { ...state, payload };
}
case: 'FAILURE': {
return { ...state, error: true };
}
case: 'FINISH': {
return { ...state, loading: false };
}
}
return state;
}

미들웨어: 연쇄 작용(effects)
const notificationEffect = store => nextRunner => action => {
const { type, payload, meta = {} } = action;
const { errorMessage, successMessage } = meta;
if (type === 'ERROR' && errorMessage) {
store.dispatch(showMessage(errorMessage, false));
} else if (type === 'SUCCESS' && successMessage) {
store.dispatch(showMessage(successMessage, true));
}
return result;
}
return {
type: 'REDUX_PACK',
promise: Api.get('/resource'),
meta: {
successMessage: '성공적으로 요청을 완료했습니다.',
errorMessage: '서버에 문제가 발생했습니다.',
}
};
}
function showMessage(msg, isSuccess) {
return {
type: 'SHOW_NOTIFICATION',
Payload: msg,
};
}

미들웨어: 연쇄 작용(effects)
const notificationEffect = store => nextRunner => action => {
const { type, payload, meta = {} } = action;
const { errorMessage, successMessage } = meta;
...
if (type === 'SHOW_NOTIFICATION') {
const hide = () => store.dispatch(hideMessage());
setTimeout(hide, 4000);
debounceRunner(hide);
}
return result;
}

컨테이너 컴포넌트
예제
import openSocket from 'socket.io-client';
const customAsyncMiddleware = store => {
const io = openSocket();
return nextRunner => action => {
if(action.type === 'CONNECT_POST') {
io.on('message', function(message) {
store.dispatch({ type: 'ADD_CHAT_MESSAGE', payload: message});
});
} else if (action.type === 'AXIOS_GET') {
axios.get(action.payload.url).then((response) => {
store.dispatch({
type: 'ADD_AXIOS_RESPONSE',
payload: response.data
});
});
return action;
}
}
}
const chat = (state, action) => {
if (action.type === 'ADD_CHAT_MESSAGE')
return { message: action.payload };
return state;
};
const axios = (state, action) => {
if (action.type === 'ADD_AXIOS_RESPONSE')
return { data: action.payload };
return state;
};
const ChatMessageContainer = connect(
state => state.chat.message,
)(ChatMessage);
const DBDataContainer = connect(
state => state.axios.data,
)(DBData);
리듀서

파이어베이스 연결 예제
const customFirebaseMiddleware = store => {
firebase.initializeApp(config);
const database = firebase.database();
return nextRunner => action => {
if(action.type === 'CONNECT_FIREBASE') {
const postRef = firebase.database().ref('posts');
postRef.on('value', function(snapshot) {
store.dispatch({ type: 'SET_POST', payload: snapshot.val()});
});
} else if (action.type === 'DISCONNECT_FIREBASE' && database) {
database.off();
}
}
}

Rest API → GraphQL
3 Calls 1 Call

자동 완성: 데이터 시뮬레이션
swagger GraphiQL

자동 완성: 편집기
Typescript + schema
codegen

형상 관리
const TOGGLE_TODO = gql`
mutation ToggleTodo($id: Int!) {
toggleTodo(id: $id) @client
}
`;
const Todo = ({ id, completed, text }) => (
<Mutation mutation={TOGGLE_TODO} variables={{ id }}>
{toggleTodo => (
<button onClick={toggleTodo}> {text} </button>
)}
</Mutation>
);

연쇄 효과: middleware → apollo-link
const link = new ApolloLink((operation, forward) => {
// request 전
return forward(operation).map((data) => {
// request 후
return data;
});
});
function middleware(store) {
return function (nextRunner) {
return function(action) {
// 리듀서 전
// 리듀서 후
return result;
}
}
}

스토리북과 API Mocking
const apolloManifest = require('../../../apollo-manifest.json');
const id = 112358;
axios({
method: 'post',
url: 'http://localhost:3000/graphql',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify({
variables,
query: getQueryFromManifest(apolloManifest)
}),
})
.then(({ data }) => {
fs.writeFile(
`/__mocks__/listing.json`,
JSON.stringify(data),
);
});

출력 컴포넌트
출력 컴포넌트
GraphQL이
완벽한 것만은
아닙니다.
● GraphQL 서버 구축 비용
● 학습 장벽
● 새 패러다임의 적응 필요
검색 액션 API요청 connect() 출력
검색 Filter변경 <Query/> 출력API요청

Context
Redux
Apollo
상황에 맞게
잘 쓰자!
도입 편리성
생산성

연쇄 작용
import { SET_FILTER } from '../actions/searchFilterActions';
import { requestTransactionList, resetTransactionList } from '../actions/transactionPackActions';
export default store => nextRunner => action => {
if (type === SET_FILTER) {
const { params } = payload || {};
store.dispatch(resetTransactionList());
store.dispatch(requestTransactionList(params));
}
return result;
}

let prevParams;
fuction apiAction(params) {
if (shallowEqual(prevParams,params))
return;
prevParams = params;
redux.dispatch({type: 'START'});
Api.get(‘search’, params).then(response =>
redux.dispatch({type: 'SUCCESS', payload: response});
).catch(error=>
redux.dispatch({type: 'ERROR', payload:error});
).finally(() => redux.dispatch({type: 'FINISH' });
}

Redux

More Related Content

What's hot (20)

Similar to Redux (20)

More from NAVER Engineering (20)

Redux