리덕스 미들웨어를 통한 비동기 작업 처리

  리액트에서 API서버를 연동할 때는 API요청에 대한 상태를 잘 관리 해야 한다. 요청 시작 후 로딩 중, 요청 성공 또는 실패했을 때는 로딩이 끝났다는 것을 명시해야 한다. 이런 작업은 리덕스 미들웨어를 사용해서 효율적으로 처리할 수 있다.

  리덕스 미들웨어는 액션을 디스패치 한 후 리듀서가 이를 처리하기 전에 지정된 작업을 실행한다. 이때 미들웨어 에서는 전달 받은 액션을 단순히 콘솔에 기록하거나, 전달 받은 액션 정보를 기반으로 액션을 취소하거나, 다른 종류의 액션을 디스패치 하는 등의 일을 할 수 있다.

  사실 이미 수 많은 미들웨어가 존재 하기 때문에 미들웨어를 직접 만들 일은 거의 없다. 하지만 배우는 단계 이므로 간단한 미들웨어를 만들어 보자.

//lib/loggerMiddleware.js
//store는 리덕스 스토어 인스턴스
//action은 디스패치된 액션
//next는 함수형태 이며, sotre.dispatch와 비슷한 역할을 한다
//next(action)을 하면 다음에 처리할 미들웨어 에게 액션을 넘긴다.
//다음 미들웨어가 없으면 리듀서에게 액션을 넘긴다.
//next를 사용하지 않으면 액션이 리듀서에 전달되지 않는다.
const loggerMiddleWare = store => next => action => {
    console.group(action && action.type);//액션 타입으로 log를 그룹화
    console.log('previous state', store.getState());
    console.log('action', action);
    next(action);//다음 미들웨어 또는 리듀서에 전달
    console.log('next state', store.getState());
    console.groupEnd();
};
 
export default loggerMiddleWare;

//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import rootReducer from "./modules";
import loggerMiddleWare from "./lib/loggerMiddleware";
 
//리덕스 미들웨어 스토어에 적용
//미들웨어는 스토어를 생성하는 과정에서 적용 된다.
const store = createStore(rootReducer, applyMiddleware(loggerMiddleWare));
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
 
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
 

redux-logger

  커뮤니티에 올라와 있는 로거 미들웨어 이다.

import {createLogger} from 'redux-logger/src';
const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger));

리덕스 미들웨어를 통한 비동기 작업 관리

  비동기 작없을 처리할때 다음과 같은 미들웨어를 사용하면 된다.

    reudx-thunk: 비등기 작업을 처리할 때 가장 많이 사용하는 미들웨이다. 객체가 하닌 함수 형태의 액션을 디스패치할 수 있게 한다.

    redux-saga: 특정 액션이 디스패치 되었을 때 정해진 로직에 따라 다른 액션을 디스패치 시키는 규칙을 작성해 비동기 작업을 처리할 수 있게 한다.

 

  redux-thunk

    Thunk는 특정 장업을 나중에 할 수 있게 미루기 위해 함수 형태로 감싼 것을 의미한다.

const addOne = x => x + 1;
const addOneThunk = x => () => addOne(x);
const fn = addOneThunk(1);
setTimeout(() => {
    const val = fn();
    console.log(val);
}, 1000);

  redux-thunk는 다음과 같이 사용하면 된다

//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import rootReducer from "./modules";
import {createLogger} from "redux-logger/src";
import ReduxThunk from 'redux-thunk';
 
const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger, ReduxThunk));
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
 
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
 

//modules/counter.js
import {createAction, handleActions} from 'redux-actions';
 
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';
 
export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);
 
export const increaseAsync = () => dispatch => {
    setTimeout(() => {
        dispatch(increase());
    }, 1000);
}
 
export const decreaseAsync = () => dispatch => {
    setTimeout(() => {
        dispatch(decrease());
    }, 1000);
}
 
//초기 상태가 반드시 객체일 필요는 없다
const initialState = 0;
 
const counter = handleActions(
    {
        [INCREASE]: state => state + 1,
        [DECREASE]: state => state - 1,
    },
    initialState
);
 
export default counter;

//containers/CounterContainer.jsimport React from 'react';
import {connect} from 'react-redux';
import {increaseAsync, decreaseAsync} from '../modules/counter';
import Counter from '../components/Counter';
 
const CounterContainer = ({number, increaseAsync, decreaseAsync}) => {
    return (
        <Counter number={number} onIncrease={increaseAsync} onDecrease={decreaseAsync}/>
    );
};
 
export default connect(
    state => ({
        number: state.counter
    }),
    {
        increaseAsync,
        decreaseAsync,
    }
)(CounterContainer);

  redux와  웹 요청 비동기 작업 처리

//modules/sample.js
import {handleActions} from 'redux-actions';
import * as api from '../lib/api';
 
const GET_POST = 'sample/GET_POST';
const GET_POST_SUCCESS = 'sample/GET_POST_SUCCESS';
const GET_POST_FAILURE = 'sample/GET_POST_FAILURE';
 
const GET_USERS = 'sample/GET_USERS';
const GET_USERS_SUCCESS = 'sample/GET_USERS_SUCCESS';
const GET_USERS_FAILURE = 'sample/GET_USERS/FAILURE';
 
//thunk함수 생성
export const getPost = id => async dispatch => {
    dispatch({type: GET_POST}); //요청 시작한 것을 알린다
    try {
        const response = await api.getPost(id);
        dispatch({
            type: GET_POST_SUCCESS,
            payload: response.data
        });
    }
    catch(err) {
        dispatch({
            type: GET_POST_FAILURE,
            payload: err,
            error: true
        });
        throw err;
    }
};
 
export const getUsers = () => async dispatch => {
    dispatch({type: GET_USERS});//요청 시작을 알린다
    try {
        const response = await api.getUsers();
        dispatch({
            type: GET_USERS_SUCCESS,
            payload: response.data,
        });
    }
    catch(err) {
        dispatch({
            type: GET_USERS_FAILURE,
            payload: err,
            error: true,
        });
        throw err;
    }
};
 
const initialState = {
    loading: {
        GET_POST: false,
        GET_USERS: false,
    },
    post: null,
    users: null,
};
 
const sample = handleActions(
    {
        [GET_POST]: state => ({
            ...state,
            loading: {
                ...state.loading,
                GET_POST: true, //요청 시작
            }
        }),
        [GET_POST_SUCCESS]: (state, action) => ({
            ...state,
            loading: {
                ...state.loading,
                GET_POST: false, //요청 완료
            },
            post: action.payload
        }),
        [GET_POST_FAILURE]: (state, action) => ({
            ...state,
            loading: {
                ...state.loading,
                GET_POST: false, //요청 완료
            }
        }),
        [GET_USERS]: state => ({
            ...state,
            loading: {
                ...state.loading,
                GET_USERS: true, //요청 시작
            }
        }),
        [GET_USERS_SUCCESS]: (state, action) => ({
            ...state,
            loading: {
                ...state.loading,
                GET_USERS: false, //요청 완료
            },
            users: action.payload
        }),
        [GET_USERS_FAILURE]: (state, action) => ({
            ...state,
            loading: {
                ...state.loading,
                GET_USERS: false, //요청 완료
            }
        })
    },
    initialState
);
 
export default sample;

//containers/SampleContainer.js
import React from 'react';
import {connect} from "react-redux";
import Sample from "../components/Sample";
import {getPost, getUsers} from '../modules/sample';
 
const {useEffect} = React;
const SampleContainer = ({
    getPost,
    getUsers,
    post,
    users,
    loadingPost,
    loadingUsers,
}) => {
    useEffect(() => {
        getPost(1);
        getUsers(1);
    }, [getPost, getUsers]);
    return (
        <Sample
            post={post}
            users={users}
            loadingPost={loadingPost}
            loadingUsers={loadingUsers}
        />
    );
};
 
export default connect(
    ({sample}) => ({
        post: sample.post,
        users: sample.users,
        loadingPost: sample.loading.GET_POST,
        loadingUsers: sample.loading.GET_USERS,
    }),
    {
        getPost,
        getUsers,
    }
)(SampleContainer);

//components/Sample.js
import React from 'react';
 
const Sample = ({loadingPost, loadingUsers, post, users}) => {
    return (
        <div>
            <section>
                <h1>post</h1>
                {loadingPost && 'loading...'}
                {!loadingPost && post && (
                    <div>
                        <h3>{post.title}</h3>
                        <h3>{post.body}</h3>
                    </div>
                )}
            </section>
            <hr/>
            <section>
                <h1>user lists</h1>
                {loadingUsers && 'loading...'}
                {!loadingUsers && users && (
                    <ul>
                        {users.map(user => (
                            <li key={user.id}>
                                {user.username} ({user.email})
                            </li>
                        ))}
                    </ul>
                )}
            </section>
        </div>
    )
}
 
export default Sample;

위의 코드는 다음과 같이 줄일 수 있다.

 

//lib/createRequestThunk.js
import {startLoading, finishLoading} from "../modules/loading";
 
export default function createRequesThunk(type, request) {
    const SUCCESS = `${type}_SUCCESS`;
    const FAILURE = `${type}_FAILURE`;
    return params => async dispatch => {
        dispatch({type});
        dispatch(startLoading(type));
        try {
            const response = await request(params);
            dispatch({
                type: SUCCESS,
                payload: response.data
            });
            dispatch(finishLoading(type));
        }
        catch(err) {
            dispatch({
                type: FAILURE,
                payload: err,
                error: true
            });
            dispatch(startLoading(type));
            throw err;
        }
    };
}

//modules/sample.js
import {handleActions} from 'redux-actions';
import * as api from '../lib/api';
import createRequesThunk from "../lib/createRequestThunk";
 
const GET_POST = 'sample/GET_POST';
const GET_POST_SUCCESS = 'sample/GET_POST_SUCCESS';
const GET_POST_FAILURE = 'sample/GET_POST_FAILURE';
 
const GET_USERS = 'sample/GET_USERS';
const GET_USERS_SUCCESS = 'sample/GET_USERS_SUCCESS';
const GET_USERS_FAILURE = 'sample/GET_USERS/FAILURE';
 
//thunk함수 생성
export const getPost = createRequesThunk(GET_POST, api.getPost);
export const getUsers = createRequesThunk(GET_USERS, api.getUsers);
 
const initialState = {
    loading: {
        GET_POST: false,
        GET_USERS: false,
    },
};
 
const sample = handleActions(
    {
        [GET_POST_SUCCESS]: (state, action) => ({
            ...state,
            post: action.payload,
        }),
        [GET_USERS_SUCCESS]: (state, action) => ({
            ...state,
            users: action.payload,
        }),
    },
    initialState
);
 
export default sample;

 

//modules/loading.js
import {createAction, handleActions} from 'redux-actions';
 
const START_LOADING = 'loading/START_LOADING';
const FINISH_LOADING = 'loading/FINISH_LOADING';
 
export const startLoading = createAction(
    START_LOADING,
    requestType => requestType
);
 
export const finishLoading = createAction(
    FINISH_LOADING,
    requestType => requestType
);
 
const initialState = {};
 
const loading = handleActions(
    {
        [START_LOADING]: (state, action) => ({
            ...state,
            [action.payload]: true,
        }),
        [FINISH_LOADING]: (state, action) => ({
            ...state,
            [action.payload]: false,
        }),
    },
    initialState
);
 
export default loading;

 

//modules/index.jsimport {combineReducers} from "redux";
import counter from './counter';
import sample from './sample';
import loading from "./loading";
 
const rootReducer = combineReducers({
    counter,
    sample,
    loading,
});
 
export default rootReducer;

 

//containers/SampleContainer.js
import React from 'react';
import {connect} from "react-redux";
import Sample from "../components/Sample";
import {getPost, getUsers} from '../modules/sample';
 
const {useEffect} = React;
const SampleContainer = ({
    getPost,
    getUsers,
    post,
    users,
    loadingPost,
    loadingUsers,
}) => {
    useEffect(() => {
        getPost(1);
        getUsers(1);
    }, [getPost, getUsers]);
    return (
        <Sample
            post={post}
            users={users}
            loadingPost={loadingPost}
            loadingUsers={loadingUsers}
        />
    );
};
 
export default connect(
    ({sample, loading}) => ({
        post: sample.post,
        users: sample.users,
        loadingPost: loading['sample/GET_POST'],
        loadingUsers: loading['sample/GET_USERS'],
    }),
    {
        getPost,
        getUsers,
    }
)(SampleContainer);