2. 리덕스 설정하기

리덕스 관련 로직들을 작성하기 전에, 필요한 기본적인 파일들을 만들고 프로젝트에 리덕스를 적용해보겠습니다.

apod 모듈 틀 만들기

리덕스 액션, 액션생성함수, 리듀서가 담겨있는 모듈을 만들어보겠습니다. 비록 이 프로젝트에서 만들 모듈은 하나밖에 존재하지 않지만, 앞으로 여러분들이 만들 프로젝트들에서는 여러개의 모듈들이 존재하게 될 것이므로, combineReducers 를 하는 방향으로 작업을 진행하겠습니다.

앞으로 우리가 만들 액션들은 꽤 많지만, 하나만 미리 만들어두겠습니다.

`src/modules/apod.js`

import { createAction, handleActions } from 'redux-actions';
import { Map } from 'immutable';

// 액션 타입
const PREVIOUS = 'apod/PREVIOUS';

// 액션 생성 함수
export const previous = createAction(PREVIOUS);

// 리듀서의 초깃값
const initialState = Map({});

// 리듀서
export default handleActions({
  [PREVIOUS]: (state, action) => state // 나중에 구현
}, initialState);

모듈을 만들었으니까, (나중에 모듈의 종류가 많아질때를 대비하기 위해서) combineReducers 를 통하여 루트 리듀서를 만들겠습니다.

`src/store/modules/index.js`

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

export default combineReducers({
  apod
});

스토어 만들기

스토어를 만들어주는 configure 함수를 작성하고 내보내주세요. 우리는 리덕스 개발자도구와 미들웨어를 사용하기 위해서 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 를 사용합니다. (크롬 확장 프로그램에 작성되어있는 자바스크립트 함수입니다.) 만약에 리덕스 개발자도구가 설치되어있지 않다면 일반 compose 를 사용합니다.

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

const configure = () => {
  const devTools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
  const composeEnhancers = devTools || compose;

  const middlewares = []; // 나중에 이 자리에 미들웨어 추가

  const store = createStore(modules, composeEnhancers(
    applyMiddleware(...middlewares)
  ));

  return store;
}

export default configure;

그럼 이제 이 함수를 사용하여 스토어를 만들고 내보내줍시다.

`src/store/index.js`

import configure from './configure';
export default configure();

프로젝트에 리덕스 적용하기

프로젝트에 리덕스를 적용하기 위해서, App 보다도 더 위에 있는 컴포넌트인 Root 컴포넌트를 만들어주겠습니다.

`src/Root.js`

import React from 'react';
import { Provider } from 'react-redux';
import App from './components/App';
import store from './store';

const Root = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
};

export default Root;

그리고, 이제 App 컴포넌트는 components 로 이동시켜준 뒤, 기존의 로직들을 다 지우세요.

`src/components/App.js`

import React, { Component } from 'react';
import ViewerTemplate from './ViewerTemplate';
import SpaceNavigator from 'components/SpaceNavigator';
import Viewer from 'components/Viewer';

class App extends Component {
  render() {
    return (
      <ViewerTemplate
        spaceNavigator={<SpaceNavigator/>}
        viewer={(
          <Viewer/>
        )}
      />
    );
  }
}

export default App;

그 다음엔, index.js 엔트리 파일에서 App 대신 Root 컴포넌트를 렌더링하세요.

`src/index.js`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './styles/base.scss';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

4-2. 리덕스 설정하기