컨텐츠 내 위젯


Redux Angular / React

Redux는 flux 패턴에 영감을 받아 만들어진 react의 중앙 state 관리 라이브러리 이다. 이것을 이용하면 컴포넌트끼리 굳이 여러번 거치지 않고 동일 state를 참조할 수 있다.

서로 직계 부모가 다른 컴포넌트끼리 값을 주고 받으려면 어떻게 해야 하는가? (Vue에서는 이벤트 버스 등을 사용하는데, 이건 논외로 하고) Redux가 없이 쓰려면 동일한 부모가 나올 때까지 함수를 올렸다가. 서로 원하는 컴포넌트까지 순차적으로 정리 해주서야 한다. 이 불편함을 해소하는데 쓰는 것이 redux 이다.

Redux의 전체적인 흐름을 보기 전에 사전에 알고 있어야 할 것들을 간략하게 정리하도록 하자. http://saysun12.egloos.com/1948273 참고

1. Action
  =>어떤 행위를 하고, 그 행위가 어떤 데이터를 동반하는지 (payload)를 지정해 놓은 것.

2. Dispatch
  =>Store 란 주체에다가 Action을 전달해 주는것. 

3. Store (Reducer+)
  => 데이터 보관소 (state) 및 그 데이터에 대한 로직이 담긴 인스턴스 , Redux 에서는 Reduce, Middlewarer의 묶음으로 사용한다.

4. View
  => Store를 구독하여 그 state를 화면에 표출 및 Event를 통해 Dispatch 호출.


이것들을 묶어서 아래와 같은 그림으로 표현할 수 도 있다.


위 그림은 리덕스에서의 기본 데이터 흐름을 그림으로 표현한 것이다. 여기서는 (1) Action, (2) Dispatch, (3) Store, (4) Reducer 로 나뉠  수 있다.


1. Action
(4) 리듀서에게 전달할 자신의 행동패턴과, 그에 따라 뭘 전달할지를 지정한다. 위 그림에서는 전달할 데이터가 고정되어 있는데 이래서는 쓸모가 없다. 그래서 생긴 패턴이 액션 생성자 패턴이다. 자세한 소스와 부연설명 이미지는 아래와 같다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export const TYPES = {
CHANGE: "CHANGE",
ADDCLICK: "ADDCLICK",
ADDMOVIE: "ADDMOVIE",
LOADSTART: "LOADSTART",
LOADEND: "LOADEND"
};

// 액션 생성자 이 녀석을 dispath함
export const ACTION_CREATOR = {
changeStar: f => {
return { type: TYPES.CHANGE, f: f }; // 두번째 매개변수는 내가 바꿀 새로은 데이터를 리턴하는 함수
}
};

export const ADDCLICK = {
addMovie: f => {
return { type: TYPES.ADDCLICK }; // 두번째 매개변수는 내가 바꿀 새로은 데이터를 리턴하는 함수
}
};


2. Dispatch
매개변수를 이용해 (4) 리듀서에게 특정 액션을 전달해준다, 이 때 위에서 말했던 액션 생성자를 사용한다. 실제 사용법은 "react-redux" 에서 제공하는 connect를 이용해 필요한 component를 매핑해 주는 것이다.

1
2
3
4
5
6
const mapDispatchToProps = dispatch => {
return {
changeStar: (f, index, star) => dispatch(ACTION_CREATOR.changeStar(f, index, star)), // 액션 생성자 함수는 여기에 연결.
addMovie: () => dispatch(ADDCLICK.addMovie()) // 액션 생성자 함수는 여기에 연결.
};
};


1
2
3
4
export const MovieComponent = connect(
mapStateToProps, // state를 props로 사용
mapDispatchToProps // dispatch 기능을 props로 사용
)(Movie); // Movie를 connect가 래핑한 다음에 내보내서 사용할수 있도록 해주는것


3. Store
메인 저장소이다. redux 에서는 reduce 및 middlewarer의 조합으로써 이뤄진다. 또한 만들어진 store는 렌더시 등록을 해야지만 View와의 관계가 이뤄진다.

 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
26
27
28
29
30
31
32
33
import { REDUCER_MOVIE, REDUCER_LOADING } from "./reducer";
import { createStore, applyMiddleware } from "redux";
import { combineReducers } from "redux";
import createSagaMiddleware from "redux-saga";

// 미들웨어 -> 양쪽에서 데이터를 주고 받을 때 중간에서 매개역할 해주며 원래 없는 기능을 불어넣는것.
export const sagaMiddleware = createSagaMiddleware();

export const initialState = [
{
name: "첫번째 무비",
poster: "movie01.jpg",
star: 0
},
{
name: "두번째 무비",
poster: "movie02.jpg",
star: 0
},
{
name: "세번째 무비",
poster: "movie03.jpg",
star: 0
}
];
let rootReducer = combineReducers({
movie: REDUCER_MOVIE,
loading: REDUCER_LOADING
});
export const rootStore = createStore(
rootReducer,
applyMiddleware(sagaMiddleware) // 스토어에 미들웨어 등록
);


1
2
3
4
5
6
// View 렌더링시 등록
const rendering = function() {
ReactDom.render(<App />, document.getElementById("app"));
};
rendering();
rootStore.subscribe(rendering);


전체 예제를 보려면 하기링크를 참고하면 된다. https://github.com/popsapple/reactExamples



덧글

댓글 입력 영역