10. 미들웨어

- 리덕스 미들웨어 : 애션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 실행한다. 액션과 리듀서 사이의 중간자라고 봐도된다.

- 미들웨어는 특히 네트워크 요청과 같은 비동기 작업을 할 때 매우 유용

 

git clone https://github.com/vlpt-playground/redux-starter-kit.git
cd redux-starter-kit
yarn

redux-logger 라이브러리 사용

yarn add redux-logger

 

src/stoer.js

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

// 미들웨어가 여러 개일 떄는 파라미터로 전달하면 된다.
// 미들웨어 순서는 여기에서 전달한 파라미터 순서대로 지정한다.

import { createLogger } from 'redux-logger';

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

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

export default store;

---

redux-thunk 라이브러리

- 리덕스를 사용하는 애플리케이션에서 비동기 작업을 처리할 때

yarn add redux-thunk

src/index.js

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

//import loggerMiddleware from './lib/loggerMiddleware';
// 미들웨어가 여러 개일 떄는 파라미터로 전달하면 된다.
// 미들웨어 순서는 여기에서 전달한 파라미터 순서대로 지정한다.

import { createLogger } from 'redux-logger';

import ReduxThunk from 'redux-thunk';

const logger = createLogger(); 

const store = createStore(modules, applyMiddleware(logger, ReduxThunk))

export default store;

 

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 => {
    setTimeout(
        () => { dispatch(decrement()) },
        1000
    );
}

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

 

src/App.js

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as counterActions from './modules/counter';


class App extends Component {
    render() {
        const { CounterActions, number } = this.props;

        
        return (
            <div>
                <h1>{number}</h1>
                <button onClick={CounterActions.incrementAsync}>+</button>
                <button onClick={CounterActions.decrementAsync}>-</button>
            </div>
        );
    }
}

export default connect(
    (state) => ({
        number: state.counter
    }),
    (dispatch) => ({
        CounterActions: bindActionCreators(counterActions, dispatch)
    })
)(App);

 

결과)

---