Redux 기본

Redux는 쉽게 말하면 앱의상태를 관리해주는 Library이다. React는 많은 라이브러리들이 있지만 그중 단짝인 라이브러리를 선택하라면 Redux가 있다. 컴포넌트가 적은 규모가 작은 앱에서는 실용성이 없는 라이브러리 이지만 컴포넌트가 여러개 얽혀있는 상태에서는 일일이 Props를 이용해서 데이터를 전달하기에는 매우 코드가 복잡해지기에 Redux를 쓰는 경우가 많다.

 

https://www.udemy.com/react-the-complete-guide-incl-redux/learn/

예를 들어서 쇼핑몰 앱을 만들었다고 가정을 하고 만약에 유저가 로그인을 했는지 여부를 판단하는 state가 있다고 하자

로그인을 해야만 권한이 부여되어서 쇼핑 카트에 접근을 하다던가, 결제 기능을 이용 할수 있어야 하는데 로그인 상태를 매 다른 컴포넌트에서 확인을 해야 한다면 코드가 복잡해지는 상황이 발생한다.

 

Redux는 앱의 모든 상태를 Central Store에 저장을 한다. 이 Central Store은 간단한 예를 들자면 매우 거대한 자바스크립트 객체라고 생각하면 이해하기가 쉽다.

Redux는 엄연히 React로 부터 독립적인 Library이다 하지만 React와 Redux를 같이 쓸 경우 React의 Component는 앱의 상태를 조작할것이다. Component는 Action이라는 정보의 객체를 Dispatch한다. Action은 무조건 Type이란 속성을 가지고 있어야한다. 이 Action 객체는 바로 Store에 보내지지는 않는다 왜냐하면 이 객체는 상태를 업데이트할 논리를 가지고 있지 않기 때문이다. 그러므로 Action은 Reducer라는 곳으로 보내지고 이 Reducer는 Action의 Type에 따라 Reducer안의 논리를 작동시켜 store에 있는 상태를 참조하여서 새로운 상태를 반환한다. 예를 들어서 Type이 "숫자 1증가" 라면 상태의 숫자가 1증가 할 것이다.  

Store은 상태가 변경될때마다 Subscription을 발동 시킨다. 그리고 이 Subscription 모듈은 앱에게 상태를 Props의 상태로 전달은 해준다.

 

 

NPM을 이용해서 Redux를 설치해준다

 

 

//Redux를 불러온다.
const redux = require('redux');
 
//Redux의 CreateStore을 불러온다. CreateStore은 앱당 하나만 있으면 된다.
const createStore = redux.createStore;
 
//초반 상태
const initialState = {
    counter:0
}
 
//Reducer이다 현재는 아무런 논리를 넣어놓지 않았다.
const rootReducer = (state = initialState, action) => {
  
    return state;
    
}
 
//Reducer가 Store의 값을 업데이트 시켜주도록 한다.
const store= createStore(rootReducer);
 
//상태 값이 변경 될때마다 Subscription을 발동하도록 해준다.
store.subscribe(() => {
    console.log("SUBSCRIPTION:", store.getState());
}
)
 
 
//Action 객체를 dispath 시켜준다.
store.dispatch({type:"INC_COUNTER"});
store.dispatch({type:"ADD_COUNTER", value: 10});
 
 
 
 
 

const rootReducer = (state = initialState, action) => {
    if(action.type ==="INC_COUNTER") {
        return {
            ...state,
            counter: state.counter+1
        };
    }
 
    if(action.type==="ADD_COUNTER") {
 
        return {
            ...state,
            counter: state.counter+action.value
        };
    }
    
}

위 처럼 action Type에 따른 논리들을 정의 해주었다.

 

SUBSCRIPTION: { counter: 1 }

SUBSCRIPTION: { counter: 11 }

 

"INC_COUNTER" type에 따라서 상태 값이 1 늘었고

"ADD_COUNTER" type에 따라서 Action객체의 속성중 하나인 value의 값인 10만큼 더해진것을 확인할수가 있다.