[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[1]

 

1. 작업 환경 준비

 

 

리덕스를 적용한 프로젝트를 준비 하겠습니다.

 

먼저 CRA(create-react-app)를 사용하여 새로운 리엑트 프로젝트를 생성합니다.

 

 

 yarn create react-app learn-redux-middleware

 

리덕스를 사용한 카운터를 구현합니다.

필요한 라이브러리들을 프로젝트에 설치합니다.

 

yarn add redux react-redux redux-actions

 

먼저 리덕스 counter 모듈을 아래와 같이 추가합니다.

 

 

 

- modules/counter.js

 

import { createAction, hanldeAction } from 'redux-actions';

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

const initalState = 0;

const counter = hanldeAction(
    {
        [INCREASE]: state => state + 1,
        [DECREASE]: state => state - 1
    },
    initalState
);

export default counter

 

 

다음으로 루트 리듀서를 생성해주세요.

 

 

- modules/index.js

 

import { combineReducers } from 'redux';
import counter from './counter';

// 루트 리듀서 작성
const rootReducer = combineReducers({
    counter
});

export default rootReducer;

 

리듀서를 만들고 src 디렉토리의 index.js 파일을 생성한 후 Provider로 리엑트 프로젝트에 리덕스를 적용해 보세요.

 

 

- index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import rootReducer from '../modules';

const store = createStore(rootReducer);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  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();

 

이어서 카운터 컴포넌트와 카운터 컨테이너 컴포넌트를 작성합니다.

프레젠테이셔널 컴포넌트는 components 디렉토리에 저장하고, 컨테이너 컴포넌트는 containers 디렉토리에 저장합니다.

 

 

- components/Counter.js

 

import React from "react";

const Counter = ({ onIncrease, onDecrease, number}) => {
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
};

export default Counter;

 

 

 

- container/CounterContainer.js

 

import React from "react";
import { connect } from "react-redux";
import { increase, decrease } from '../modules/counter'
import Counter from "../components/Counter";

const CounterContainer = ({ number, increase, decrease }) => {
    return (
        <Counter number={number} onIncrease={increase} onDecrease={decrease} />
    );
};

export default connect(
    state => ({
        number: state.counter
    }),
    {
        increase,
        decrease
    }
)(CounterContainer);

 

다 만들었으면 App.js 에서 CounterContainer 렌더링하여 잘 작동하는지 확인해 보세요.

 

 

-App.js

 

import React from 'react';
import CounterContainer from './containers/CounterContainer';

function App() {
  return (
    <div>
      <CounterContainer/>
    </div>
  );
}

export default App;