PART4:Simply build App with Redux

Data Flow

하나를 알면 열을 알수 있다.

하나의 액션에 대해서 흐름을 파악한다면 추가 구현은 일사천리로 진행될것

이라고 생각한다.

지난 포스팅들을 돌아보면서 결국 필자가 한것은 무엇인가 생각해본다.

더미 데이터를 만들어서 그걸 호출하고 호출한 결과를 테이블형식으로 화면에 뿌려줬다.

뭔가를 PART1~ PART3 까지 주저리 주저리 써놨는데 결과는 한줄로 요약된다.

결과에서 중요한 키워드는 무엇일까.?

더미 데이터를 만들다.
더미 데이터를 호출하다.
테이블 형식의 게시판을 만들다.

내가 생각하는 정답은 호출이다. 액션이 일어난것은 오직 한가지 더미 데이터를

호출한것이다.

이는 여러 boilerplate 에서 한개의 동작을 표현한것과 같은 맥락이다.

다만 게시판은 한국인으로서 주니어 개발자에게 매우 친숙한 주제 라고 생각한다.

내 지식과 경험을 정리해서 머리 서랍속 어딘가 넣어놓는것이 내가 포스팅을 하는 주된 이유지만

공유를 통해 누군가에게 배움 혹은 나에게도 배움이 되길 바라는 이유도 있다.

그래서 게시판글을 호출하는것으로 주제를 정했고 조금은 친숙하게 Redux 개념들이 다가 갔으면 좋겠다.

사설이 길었던것같다.

호출에 관련된 더미 데이터의 여정을 흐름도를 통해 다시한번 생각해 보자

step1-index.js

스토어가 생성되고 boardActions로 부터 loadBoard 라는

action 을 dispatch 했다.

 const store = configureStore();
 store.dispatch(loadBoard());

step2-boardActions.js

스토어는 액션을 확인해본다. 그결과 문제가 없으면 action type 인 LOAD_BOARD_CLEAR 와

prevState 인 contents 를 반환 해서 Reducer 에게 넘겨준다.

export function loadBoard() {
    return (dispatch) => {
        return boardApi.getAllContents()
        .then(contents => dispatch({type : LOAD_BOARD_CLEAR, contents });
        )
        .catch(error => {
            throw(error);
        });
    }
};

step3-root.js

컴바인된 Reducer들 중에 action type이 일치하는 Reducer를 찾는다.

const rootReducer = combineReducers({
    reduers,,,,,
});

step4-boardReducer.js

action type이 LOAD_BOARD_CLEAR 인 Reducer 를 boardReducer에서 찾았다.

더미 데이터를 조작하지 않기때문에 prevState 를 그대로 받아서 store(newState)에 넘겨준다.

export default function boardReducer(state = initState.contents, action) {
    switch(action.type) {
        case LOAD_BOARD_CLEAR :
            return action.contents;

        default :
            return state;
    }
}

step5-About.js

store 는 boardReducer 가 반환한 newState 를 가지고 있다.

이때 root Reducer에 키값(이름)을 정해주지 않으면 Reducer 명으로 newState를 갖고 있게 된다.

필자는 board Reducer에 이름을 contents 로 정의 했기 때문에 contents 라는 newState 를 갖고

있는 상태인것이다.

그리고 지난 포스팅에 connect 는 Redux 스토어에 컴포넌트를 연결해주는 역할을 한다고 했다.

About 컴포넌트는 connect 를 통해 redux store 와 연결되 있기 때문에

contents 를 호출해서 사용할수 있게된다.

이제 About 컴포넌트를 보자.

render 에선 this.props.contents 인데 mapStateToProps 를 보면 state.contents 로 호출하고 있다.

코드를 위에서 아래로 보고 내려 왔다면 의아해 할수도 있다.

mapStateToProps 에 의미는 state 를 props 로 맵핑 하다 라는 뜻이다.

store 가 가지고 있는 state 를 사용하려면 props 로 맵핑 해줘야 한다.

function mapStateToProps(state, ownProps) {
    return {
        contents: state.contents
    };
}

맵핑이 되었기 때문에 컴포넌트 내부에서 this.props.contents로 호출할수 있는것이다.

호출된 더미 데이터의 여정은 render 에서 map 을 돌고 마무리 된다.

다시한번 흐름을 따라가 보도록 하자.

다음 포스팅부터 본격적인 CRUD를 구현한다.

티스토리

PART4:Simply build App with Redux - Data Flow

PART4:Simply build App with Redux - Data Flow

Data Flow