Redux

Redux

redux는 상태 관리 라이브러리이다. 여기서 상태(state)란 다음과 같다.

props은 부모에서 자식 방향으로 값을 보내 변하지 않는 값을 의미하며 생성할 때 전달하는 값이다.
state는 컴포넌트 안에서 데이터를 전달하는 방식이며 컴포넌트 안에서도 충분히 값을 변경할 수 있다.
state가 변화면 re-rendering 되는 특징이 있다.

redux는 이러한 state를 관리해 주는 tool이다.
redux의 유무에 대한 차이를 살펴보자.

만약 데이터를 공유하는 컴포넌트들이 계층적으로 존재한다면 첫 번째 그림과 같이 계속해서 부모와 자식 사이를 지나가며 상태를 유지해야 한다. 하지만 redux를 사용한다면 store하나를 만들어 컴포넌트들의 상태를 관리할 수 있다.

Action: 어떤 일이 일어났는지 설명하는 객체

Reduccer: 이전 state와 action object를 받아 next state를 반환

Store: 전체 state를 감싸고 있는 역할

 

 

그렇다면 이제 직접 redux를 설정해 보자.
미들웨어와 세팅을 해보자.

npm install redux react-redux redux-promise redux-thunk --save

store를 변경하려면 Dispatch를 이용하여 Action을 일으키는 방법으로만 가능하다.
하지만 언제나 Action 객체를 받는것은 아니다. promise나 function 형태로도 받을 수 있다.
이를 해결하기 위해 redux-promise, redux-thunk 미들웨어를 설치한 것이다.

 

설치가 완료되었다면 index.js를 다음과 같이 작성하자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/antd.css';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducer';

const createStorewithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

ReactDOM.render(
    <Provider store={createStorewithMiddleware(Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
        )}
    >
        <App />
    </Provider>
);

reportWebVitals();

 모듈을 import한 뒤 Provider안에 strore를 추가한 뒤 App을 감싸면 redux를 연결할 수 있다.
reducer가 있어야 연결할 수 있기 때문에 임의로 하나 작성한다.

__reducer 디렉토리안에 index.js를 만들어 reducer만 import해도 사용할 수 있게 한다.

import { combineReducers } from 'redux';
import user from './user_reducer'

const rootReducer = combineReducers({
    // user,
})

export default rootReducer;

reducer는 state가 변환된 것을 계산해 돌려주는 역할을 한다. 이러한 reducer는 여러 개가 존재할 수 있다.
combineReducers는 여러개의 reducer를 root reducer에서 합쳐주는 역할을 한다.