01.16 리덕스 미들웨어와 외부데이터 연동 0


React.js

01.16. 리덕스 미들웨어와 외부데이터 연동

웹 애플리케이션을 만들 때는 대부분 서버와 데이터를 연동해야한다. 데이터를 연동하려면 일반적으로 서버에 구현된 REST API에 Ajax를 요청하여 데이터를 가져오거나 입력해야한다. 

01.16.1. 리덕스 미들웨어(middleware)란?

액션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 실행한다. 
(미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다.)

미들웨어가 할 수 있는 작업은 여러 가지가 있다. 단순히 전달받은 액션을 콘솔에 기록할 수도 있고, 전달받은 액션 정보를 기반으로 액션을 취소해 버리거나 다른 종류의 액션을 추가로 디스패치할 수도 있다.

01.16.1.1. 미들웨어 생성

// src/lib/middlewareTest.js
const middlewareTest = store => next => action => {
// 현재 스토어 상태 값 기록
console.log('현재 상태', store.getState());
// 액션 기록
console.log('액션',action);

// 액션을 다음 미들웨어 또는 리듀서에 전달
const result = next(action);

// 액션 처리 후 스토어의 상태를 기록
console.log('다음 상태', store.getState());

return result; // 여기에서 반환하는 값은 store.dispatch(ACTION_TYPE)했을 때 결과로 설정한다.

}

export default middlewareTest;// 내보내기
store 와 action 은 익숙하지만, next 는 익숙하지 않다. next는 store.dispatch 와 비슷한 역할이다. 차이점은 next(action) 을 했을 때는 그다음 처리해야 할 미들웨어로 액션을 넘겨주고, 추가로 처리할 미들웨어가 없다면 바로 리듀서에 넘겨준다는 것이다. 하지만 store.dispatch는 다음 미들웨어로 넘기는 것이 아니라 액션을 처음부터 디스패치한다.
//src/store.js
import { createStore, applyMiddleware } from 'redux';
import modules from './modules';
import middlewareTest from './lib/middlewareTest';

// 미들웨어가 여러 개일 경우 파라미터로 전달하면 된다. (applyMiddleware(a,b,c))
// 미들웨어 순서는 여기에서 전달한 파라미터 순서대로 지정한다.
const store = createStore(modules, applyMiddleware(middlewareTest));

export default store;
미들웨어는 store를 생성할 때 적용할 수 있다. 액션과 리듀서 사이에서 액션 정보를 가로채 수정한 후 리듀서로 전달할 수도 있고, 액션 정보에 따라 아예 무시할 수 있다(next를 호출하지 않고 return 하면 된다).

01.16.2. 비동기 작업을 처리하는 미들웨어 사용

미들웨어의 작동 방식이 이해되었다면, 오픈소스 커뮤니팅 공개된 미들웨어를 사용해 비동기 액션을 다루는 방법을 알아본다.

01.16.2.1. redux-thunk

리덕스를 사용하는 애플리케이션에서 비동기 작업을 처리할 때 가장 기본적인 방법은 redux-thunk 미들웨어를 사용하는 것이다. 리덕스 공식 매뉴얼에서도 이를 사용하여 비동기 작업을 다룬다.
※ thunk 는 특정 작업을 나중에 할 수 있도록 미루려고 함수 형태로 감싼 것을 의미한다.
const x = 1+2; // 바로 실행
const foo = () => 1+2 ; // foo()를 호출해야 실행
redux-thunk는 객체가 아닌 함수도 디스패치할 수 있다. 일반 액션 객체로는 특정 액션을 디스패치한 후 몇 초 뒤에 실제로 반영시키거나 현재 상태에 따라 아예 무시하게 만들 수 없다. 하지만 redux-thunk 미들웨어는 함수를 디스패치할 수 있게 함으로써 일반 액션 객체로는 할 수 없는 작업들도 할 수 있게 한다.
// src/modules/counter.js
import {handleActions, createAction} from 'redux-actions';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

export const increment = createAction(INCREMENT);
export const decrement = createAction(DECREMENT);

export const incrementAsync = () => dispatch => {
// 1초 뒤 액션 디스패치
setTimeout(
() => { dispatch(increment()) },
1000
);
}

export const decrementAsync = () => dispatch => {
// 1초 뒤 액션 디스패치
setTimeout(
() => { dispatch(decrement()) },
1000
);
}

export default handleActions({
[INCREMENT]: (state, action) => state +1,
[DECREMENT]: (state, action) => state -1
}, 0);

// src/App.js - 버튼
<button onClick={CounterActions.incrementAsync}>+</button>
<button onClick={CounterActions.decrementAsync}>-</button>
INCREMENT 와 DECREMENT 액션을 1초 뒤에 디스패치하는 액션 함수 incrementAsync 와  decrementAsync 를 만들었다. 그리고 App 컴포넌트에서 button 코드를 수정하면 함수형 액션을 먼저 디스패치하고, 1초 뒤에 지정한 액션을 디스패치한다.

01.16.3. 웹 요청 처리

axios 라는 Promise 기반 HTTP 클라이언트 라이브러리를 사용하여 웹 요청을 한다.

01.16.3.1. Promise 

Promise 는 ES6 문법에서 비동기 처리를 다루는데 사용하는 객체이다.
function promiseTest(number, fn) {
setTImeout(
function() {
console.log(number);
if(fn) fn();
},
1000
);
}

promiseTest(1, function() {
promiseTest(2, function() {
promiseTest(3, function() {
promiseTest(4);
})
})
});
위 코드를 실행하면 1초씩 간격을 두고 숫자 1,2,3,4를 콘솔에 표시한다. 이렇게 코드를 작성할 경우 콜백이 콜백을 불러 깊고 복잡해진다. 이런 문제를 해결해 주는 것이 Promise 이다.
function promiseTest(number) {
return new Promise( // Promise 생성 후 리턴
resolve => {
setTimeout( // 1초 뒤 실행
() => {
console.log(number);
resolve(); // promise가 끝났음을 알린다.
}, 1000
);
}
);
}

promiseTest(1)
.then( () => promiseTest(2) )
.then( () => promiseTest(3) )
.then( () => promiseTest(4) )
Promise 를 사용하면 코드를 더 간결하게 작성할 수 있다.

Promise 에서 결과 값을 반환할 때는 resolve(결과 값) 을 작성하고, 오류를 발생시킬 때는 reject(오류)를 작성한다. 여기에서 반환하는 결과 값과 오류는 .then() 또는 .catch() 에 전달하는 함수의 파라미터로 설정된다.
function promiseTest(number) {
return new Promise( // Promise 생성 후 리턴
(resolve, reject) => {
if ( number > 4 ) {
return reject('number is greater than 4'); // reject 는 오류를 발생시킨다.
}
setTimeout( // 1초 뒤 실행
() => {
console.log(number);
resolve(number + 1); // 현재 숫자에 1을 더한 값을 반환한다.
}, 1000
);
}
);
}

promiseTest(1)
.then( num => promiseTest(num) )
.then( num => promiseTest(num) )
.then( num => promiseTest(num) )
.then( num => promiseTest(num) )
.catch( e => console.log(e) );
비동기적으로 숫자 1씩 더하는 Promise 를 생성했다. 처음 promiseTest(1) 를 실행하면 숫자 2를 반환하고, 이 값은 .then 에 설정한 함수 파라미터로 전달한다. 순차적으로 5까지 숫자가 올라가면 오류를 발생한다.

01.16.3.1. axios

$ yarn add axios

import axios from 'axios';

axios.get('url')
.then(response => console.log(response));
axios 로 웹 요청을 했을 대 반환되는 객체는 해당 요청의 응답 정보를 지낸 객체이다.

01.16.3.2. redux-thunk와 axios 사용

// src/modules/post.js
import {handleActions, createAction} from 'reudx-actions';

import axios from 'axios';

funciton getPostAPI(postId) {
return axios.get('url/${postId}');
}

const GET_POST_PENDING = 'GET_POST_PENDING';
const GET_POST_SUCCESS = 'GET_POST_SUCCESS';
const GET_POST_FAILURE = 'GET_POST_FAILURE';

const getPostPending = createAction(GET_POST_PENDING);
const getPostSuccess = createAction(GET_POST_SUCCESS);
const getPostFailure = createAction(GET_POST_FAILURE);

export const getPost = (postId) => dispatch => {
dispatch(getPostPending()); // 요청 시작했다는 것을 알림
// 요청 시작. 여기에서 만든 promise를 return해야 나중에 컴포넌트에서 호출할 때 getPost().then(...)을 할 수 있다.
return getPostAPI(postId)
.then( () => {
// 요청이 성공했다면 서버 응답 내용을 payload로 설정하여 GET_POST_SUCCESS 액션을 디스패치한다.
dispatch(getPostSuccess(response));
// 후에 getPostAPI.then 을 했을 때 then에 전달하는 함수에서 response 에 접근할 수 있게 한다.
return response;
} )
.catch( error => {
// 오류가 발생하면 오류 내용을 payload로 설정하여 GET_POST_FAILURE 액션을 디스패치한다.
dispatch(getPostFailure(error));
// error를 throw하여 이 함수를 실행한 후 다시 한 번 catch를 할 수 있게 한다.
throw(error);
} );
}
웹 요청을 시작할 때 POST_PENDING 액션을 디스패치하고 서버가 응답할 때까지 대기한다.
요청이 끝나 성공했을 때는 POST_SUCCESS 액션을 디스패치하고
요청이 실패했을 때는 POST_FAILURE 액션을 디스패치한다.
리듀서의 초기 상태를 정의하고 handleActions를 사용하여 리듀서 함수를 구현한다.
// src/modules/post.js
(...)
const initialState = {
pending: false,
error: false,
data: {
title: '',
body: ''
}
}

export default handleAction({
[GET_POST_PENDING]: (state, action) => {
return {
...state,
pending: true,
error: false
};
},
[GET_POST_SUCCESS]: (state, action) => {
const {title, body} = action.payload.data;
return {
...state,
pending: false,
data: {
title,
body
}
};
},
[GET_POST_FAILURE]: (state, action) => {
return {
...state,
pending: false,
error: true
}
}
}, initialState);
이 모듈의 리듀서를 루트 리듀서에 넣어준다.
// src/modules/index.js
import {combineReducers} from 'redux';
import counter from './counter';
import post from './post';

export default combineReducers({
counter,
post
});

// scr/modules/counter.js
(...)
export default handleActions({
[INCREMENT]: (state, action) => state + 1,
[DECREMENT]: (state, action) => state - 1
},1);
App 컴포넌트에서 post 모듈의 액션 생성 함수를 불러와 PostActions에 바인딩하고, post 모듈 안의 상태인 data, pending, error 값을 연결한다.
// src/App.js
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as counterActions from './modules/counter';
import * as postActions from './modules/post';

class App extends Component {
loadData = () => {
const {PostActions, number} = this.props;
PostActions.getPost(number);
}

componentDidMount() {
this.loadData();
}

componentDidUpdate(prevProps, prevState) {
// 이전 number 와 현재 number 가 다르면 요청을 시작
if(this.props.number != prevProps.number) {
this.loadData();
}
}

render() {
const {CounterActions, number, post, error, loading} = this.props;
return (
<div>
<h1>{number}</h1>
{
( () => {
if (loading) return (<h2>로딩중...</h2>);
if (error) return (<h2>에러발생...</h2>);
return (
<div>
<h2>{post.title}</h2>
<p>{post.body}</p>
</div>
);
} )
}
<button onClick={CounterActions.increment}>+</button>
<button onClick={CounterActions.decrement}>-</button>
</div>
);
}
}

export default connect(
(state) => ({
number: state.counter,
post: state.post.data,
loading: state.post.pending,
error: state.post.error
}),
(dispatch) => ({
CounterActions: bindActionCreators(counterActions, dispatch),
PostActions: bindActionCreators(postActions, dispatch)
})
)(App);
해당 메서드는 PostActions.getPost 를 호출한다.
그리고 render 함수에서는 상황따라 다른 결과물을 렌더링하도록 설정되었다.
{} 내부에서 함수를 선언하고 그 함수 자체를 호출했다. 삼항 연산자가 여러 번 겹칠 때는 아예 함수를 만들어서 if 문을 사용하는 것이 더욱 가독성이 높다.
// src/App.js
PostActions.getPost(number).then(
(response) => {
console.log(response);
}
).catch(
(error) => {
console.log(error);
}
);
위 코드는 요청을 완료한 후나 오류가 발생했을 때 추가할 작업으로 redux-thunk 로 만든 액션 함수는 Promise 를 반환하기 때문에 해당 함수를 호출하고는 뒤에 .then 또는 .catch 를 입력해서 구현하면 된다.

리덕스의 정석대로 비동기 웹 요청을 하는 방법을 알아보았다. 모든 흐름을 다 이해한다 하더라도 각 요청마다 액션 타입을 세 개씩 선언하고 요청 전, 완료, 실패 상황에 따라 각각 다른 액션을 디스패치해야 하므로 조금 번거로울 수 있는 작업이다.

리덕스에서 비동기 작업을 처리하는 방법은 redux-thunk 외에도 여러 가지가 있다. redux-promise-middleware, redux-saga, redux-pender, redux-observable 등이 있는데 작동 방식과 설계 방식에 조금 차이가 있기 때문에 각 라이브러리를 한번 사용해 보는 것이 좋다.

01.16.4. redux-pender

redux-pender 는 Promise 기반 액션들을 관리하는 미들웨어가 포함되어 있는 라이브러리이다. 작동 방식은 redux-promise-middleware 와 유사하다. 액션 객체 안에 payload 가 Promise 형태라면 시작하기 전, 완료 또는 실패 했을 때 위에 PENDING, SUCCESS, FAILURE 접미사를 붙여 준다.

추가로 요청을 관리하는 리듀서가 포함되어 있으며, 요청 관련 액션들을 처리하는 액션 핸들러 함수들을 자동으로 만드는 도구도 들어있다.
그리고 요청 중인 액션을 취소할 수 있는 기능도 내장되어 있다.
$ yarn add redux-pender

// src/store.js
import {createStore, applyMiddleware} from 'redux';
import modules from './modules';

import {createLogger} from 'redux-logger';
import penderMiddleware from 'redux-pender';

/* 로그 미들웨어를 만들 때 설정을 커스터마이징 할 수 있다.
https://github.com/LogRocket/redux-logger#options
*/
const logger = createLogger();

const store = createStore(modules, applyMiddleware(logger, penderMiddleware));

export default store;

// src/modules/index.js
import {combineReducers} from 'redux';
import counter from './counter';
import post from './post';
import {penderReducer} from 'redux-pender';

export default combineReducers({
counter,
post,
pender: penderReducer
});
위 리듀서는 요청 상태를 관리한다. 이 리듀서가 가진 상태 구조는 다음과 같다.
{
pending: {},
success: {},
failure: {}
}
새 Promise 기반 액션을 디스패치하면 상태는 다음과 같이 변한다.
{
pending: {
'ACTION_NAME': true
},
success: {
'ACTION_NAME': false
},
failure: {
'ACTION_NAME': false
}
}
요청이 성공한다면 다음과 같이 변한다.
{
pending: {
'ACTION_NAME': false
},
success: {
'ACTION_NAME': true
},
failure: {
'ACTION_NAME': false
}
}
요청이 실패한다면 다음과 같이 변한다.
{
pending: {
'ACTION_NAME': false
},
success: {
'ACTION_NAME': false
},
failure: {
'ACTION_NAME': true
}
}
이런 작업은 pender 리듀서가 액션 이름에 따라서 자동으로 상태를 변경해 주기 때문에 요청과 관련된 상태는 더 이상 직접 관리할 필요가 없다.
redux-pender를 적용하면 액션 생성 함수와 리듀서의 액션 처리 관련 코드들을 간소화할 수 있다.
// src/modules/post.js
import {handleActions, createAction} from 'redux-action';
import {pender} from 'redux-pender';
import axios from 'axios';

function getPostAPI(postId) {
return axios.get('url/${postId}');
}

const GET_POST = 'GET_POST';

/* redux-pender 의 액션 구조는 Flux standard action(https://github.com/redux-utilities/flux-standard-action)을 따르기 때문에, createAction 으로 액션을 만들 수 있다.
두 번째로 들어가는 파라미터는 Promise 를 반환하는 함수여야 한다.
*/
export const getPost = createAction(GET_POST, getPostAPI);

const initialState = {
// 요청이 진행 중인지, 오류가 발생했는지 여부는 더 이상 직접 관리할 필요가 없다.
// penderReducer가 담당하기 때문이다.
data: {
title: '',
body: ''
}
}

export default handleActions({
...pender({
type: GET_POST, // type 이 주어지면 이 type에 접미사를 붙인 액션 핸들러들이 담긴 객체를 만든다
/* 요청 중일 때와 실패 했을 때 추가로 해야할 작업이 있다면
onPending: (state, action) => state,
onFailure: (state, action) => state
를 추가하며 된다.
*/
onSuccess: (state, action) => {
// 성공했을 때 해야할 작업이 따로 없다면, 이 함수도 생략할 수 있다.
const {title, body} = action.payload.data;
return {
data: {
title,
body
}
}
}
// 함수를 생략했을 때 기본 값으로는 (state, action) => state 를 설정한다.
// (state 를 그대로 반환한다는 의미.)
});
}, initialState);
신경 써야 할 상태가 줄었고, 코드의 길이도 짧아졌다. 리듀서에서 비동기 작업을 redux-pender 로 관리할 경우에는 ...pender 를 사용한다.
비동기 작업을 여러 개 관리한다면 ...pender 를 여러 번 사용하면 된다. 또 applyPenders 함수를 사용할 수도 있다.
// src/modules/post.js
import {handleActions, createAction} from 'redux-action';
import {pender, applyPenders} from 'redux-pender';
import axios from 'axios';

function getPostAPI(postId) {
return axios.get('url/${postId}');
}

const GET_POST = 'GET_POST';

export const getPost = createAction(GET_POST, getPostAPI);

const initialState = {
data: {
title: '',
body: ''
}
}

export default handleActions({
// 다른 일반 액션들을 관리 ...
}, initialState);

export default applyPenders(reducer, [
{
type: GET_POST,
onSuccess: (state, action) => {
// 성공했을 때 해야할 작업이 따로 없다면, 이 함수도 생략할 수 있다.
const {title, body} = action.payload.data;
return {
data: {
title,
body
}
}
},
/* 다른 pender 액션들
{ type: GET_SOMTHING, onSuccess: (state, action) => ... },
{ type: GET_SOMTHING, onSuccess: (state, action) => ... },
*/
}
]);
applyPenders 함수를 사용할 때 첫 번째 파라미터에는 일반 리듀서를 넣어주고, 두 번째 파라미터에는 pender 관련 객체들을 배열 형태로 넣어주면 된다.
리듀서에서 error 값과 pending 값을 더 이상 관여하지 않고, pender 리듀서가 대신 하게 되었다. App 컴포넌트 마지막 connect 하는 부분에 적용한다.
// src/App.js
(...)
export default connect(
(state) => ({
number: state.counter,
post: state.post.data,
loading: state.post.pending['GET_POST'],
error: state.post.failure['GET_POST']
}),
(dispatch) => ({
CounterActions: bindActionCreators(counterActions, dispatch),
PostActions: bindActionCreators(postActions, dispatch)
})
)(App);
Promise 기반 액션을 시작하면 액션 두 개를 디스패치한다. 하나는 GET_POST_PENDING이고, 다른 하나는 @@redux-pender/PENDING이다.
@@redux-pender/PENDING 의 payload 값에는 액션 이름이 들어가고, 이에 따라 pender 리듀서의 상태를 변화시킨다.

redux-pender 를 사용하면 Promise 기반 액션을 아주 쉽게 취소할 수 있다. Promise 기반 액션을 디스패치하고 나면 cancel 함수가 포함된 Promise 를 반환한다. 이 cancel 함수를 호출하면 미들웨어가 해당 요청을 처리하지 않는다.
// src/App.js
(...)

class App extends Component {
cancelRequest = null

handleCancel = () => {
if(this.cancelRequest) {
this.cancelRequest();
this.cancelRequest = null;
}
}

loadData = () => {
const {PostActions, number} = this.props;
PostActions.getPost(number);
}

componentDidMount() {
this.loadData();
// esc 키를 눌렀을 때 요청 취소
window.addEventListener('keyup', (e) => {
if(e.key === 'Escape') {
this.handleCancel();
}
});
}
(...)

// src/modules/post.js
...pender({
type: GET_POST,
onSuccess: (state, action) => {
const {title, body} = action.payload.data;
return {
data: {
title,
body
}
}
},
onCancel: (state, action) => {
return {
data: {
title: '취소됨',
body: '취소됨'
}
}
}
});

여기에서 cancel 함수를 호출한다고 해서 웹 요청을 취소하는 것은 아니다. 서버에 이미 요청을 보냈기 때문에 서버는 응답할 것이다. 이 응답을 미들웨어 쪽에서 무시할 뿐이다.

원본 글 - [https://kbennycc.blogspot.com/2019/02/0116.html]

덧글

댓글 입력 영역