ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • redux
    개발/react 2020. 12. 16. 20:28

    react는 state를 이용해서 컴포넌트의 상태를 관리하는데 state 하나에 들어가는 element가 많아질수록 관리하기가 힘들어지는 문제가 있다. 그래서 react에서는 redux라는 라이브러리를 이용해서 state를 좀더 쉽게 관리할 수 있게 해줬다. 크게 state를 관리하는 store와 store 를 변경하려는 dispatch 그리고 변경 작업을 일괄 관리하는 reducer로 나뉘는데 이번 포스트에서는 각각에 대해서 간단히만 다뤄보려고 한다.

     

    1. createStore 

     

    redux로 관리할 state 집합을 만드는 작업이다. 함수의 인자로는 reducer를 받는다. 

     

    const store = createStore(countReducer);

     

    2. action 

     

    state를 바꾸기 위해 취하는 액션이다. 단 여기에는 액션이 들어가지 않고 액션에 필요한 데이터만 들어간다. 변수 이름을 자유롭게 입력할 수 있는데 type 필드에 액션의 종류를 정해주는게 일반적인 것 같다. dispatch 함수를 통해 액션을 실행 할 수 있다.

     

    const incrementCount = ({incrementBy = 1} = {}) => ({
        type: 'INCREMENT',
        incrementBy
    });
    
    store.dispatch(incrementCount())

     

    3. reducer 

     

    액션을 대신 처리해주는 부분이다. MVC로 치면 controller에 해당하는 부분으로 실제 state 값의 변경을 담당한다. reducer에서 state에 대한 변경을 일괄적으로 담당하기 때문에 관리하기가 한결 쉬워지는 장점이 있다.

     

    // Reducer
    // 1. Reducers are pure functions
    // 2. Never change state or action 
    
    const countReducer = (state = { count: 0 }, action) => {
        switch (action.type) {
            case 'INCREMENT':
                return {
                    count: state.count + action.incrementBy
                };
            default:
                return state;
        }
    };

     

    4. subscribe 

     

    store의 subscribe 함수로 state 변경에 대한 변화를 구독 할 수 있다. reducer에서 업데이트 값들은 모두 여기를 거치게 된다. state 변경 값을 화면에 노출해야하는 경우에는 이 함수를 사용하면 된다.

     

    store.subscribe(() => {
        console.log(store.getState());
    });

    '개발 > react' 카테고리의 다른 글

    connect  (0) 2020.12.20
    react router  (0) 2020.12.17
    redux  (0) 2020.12.16
    scss  (0) 2020.12.13
    webpack  (0) 2020.12.13
    localStorage  (0) 2020.12.11

    댓글 0

Designed by Tistory.