frontendreact

Redux에 초기설정

redux, typescript
Views: 507

들어가면서

리액트의 데이터를 전역적으로 관리하기 위해 사용합니다.
함수를 props의 props의 props등.. 계속 내리고 올리는 방법으로 사용하게되면 디버깅을 할때 복잡해질 뿐만아니라
에러를 발생시킬수 있는 요인이 됩니다. 그러하기 때문에 리덕스를 사용하려고 합니다.
리덕스를 간단하게 만화로 이해하기

시작하기

파일 구조

파일 구조
src/store 리덕스 폴더입니다.
src/store/modules 리듀서파일들이 저장되어있는 폴더입니다.
src/store/configure.ts 리덕스 초기 설정 및 store를 export 해주는 파일입니다.
src/store/rootReducer.ts 리듀서들을 합쳐주는 파일입니다.

설치

리덕스 패키지를 설치해줍니다
npm i redux react-redux @types/redux @types/react-redux

rootReducer.ts 파일생성

modules에서 리듀서를 작성후 combineReducers 내부에 추가해줍니다.

1
2
3
4
5
import { combineReducers } from 'redux';

const rootReducer = combineReducers({});

export default rootReducer;

configure.ts 파일생성

기본설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { applyMiddleware, compose, createStore, Middleware, Store } from 'redux';
import rootReducer from './rootReducer';

const isDev = process.env.NODE_ENV === 'development';

const configureStore = ():Store => {
 const middleware: Array<Middleware> = [];
 const config = createStore(rootReducer, applyMiddleware(...middleware));
 return config;
};

const store = configureStore();

export default store;

const isDev = process.env.NODE_ENV === 'development';
isDev는 환경변수를 이용해서 현재 서버가 개발자모드인지 프로덕션모드인지 구분해줍니다.

Redux devTools 및 미들웨어 적용

1
2
3
4
5
6
7
8
9
10
// ...

const configureStore = ():Store => {
 const composeEnhancers = (isDev && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
 const middleware: Array<Middleware> = [];
 const config = createStore(rootReducer, composeEnhancers(applyMiddleware(...middleware)));
 return config;
};

// ...

const middleware: Array<Middleware> = [];
middleware 변수안의 배열에 리덕스의 미들웨어들(redux-saga, redux-thunk…)을 추가해주면 됩니다.

Redux hotloader 추가하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ...

const configureStore = ():Store => {
 // ...
    // Hot reload reducers:
 // https://github.com/reactjs/react-redux/releases/tag/v2.0.0
 if (isDev && (module as any).hot) {
  (module as any).hot.accept('./rootReducer', () => {
   const nextRootReducer = require('./rootReducer').default;
   store.replaceReducer(nextRootReducer);
  });
 }
 return config;
};

//...

최종코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { applyMiddleware, compose, createStore, Middleware, Store } from 'redux';
import rootReducer from './rootReducer';

const isDev = process.env.NODE_ENV === 'development';

const configureStore = ():Store => {

 const composeEnhancers = (isDev && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
 const middleware: Array<Middleware> = [];
 const config = createStore(rootReducer, composeEnhancers(applyMiddleware(...middleware)))

 // Hot reload reducers:
 // https://github.com/reactjs/react-redux/releases/tag/v2.0.0
 if (isDev && module.hot) {
  module.hot.accept('./rootReducer', () => {
   const nextRootReducer = require('./rootReducer').default;
   store.replaceReducer(nextRootReducer);
  });
 }
 return config;
};

const store = configureStore();

export default store;

index.tsx파일 수정

index.tsx파일에 App 컴포넌트를 Provider로 감싸줍니다.
Provider로 감싸주어야 provider 내부에 있는 컴포넌트에서 store의 값을 사용할 수 있게 됩니다.
Provider에 configureStore 설정을 넘겨줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './store/configureStore';
import {Provider} from 'react-redux';

ReactDOM.render(<Provider store={store}>
    <App />
</Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

이제 초기 셋팅은 끝났습니다. 리듀서를 추가하면 리덕스를 사용할수 있습니다.

Share