[React] redux 라이브러리

리덕스 개념

컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 여러 컴포넌트에서 동일한 상태를 참조할 수 있도록 하는 라이브러리. 

기존의 데이터 처리는

부모 컴포넌트에서 업데이트하면서 상태를 관리하고 자식 컴포넌트는 부모 컴포넌트의 데이터를 참조(props)하기 때문에

자식 컴포넌트의 노드가 깊어지면 데이터를 끌고 가야하는 불편함이 있다. 

또, 부모 컴포넌트끼리 값을 참조해야 하는 경우 그 위에 또다른 상위 컴포넌트를 생성하여 같은 데이터를 참조할 수 있도록 유도해야 한다. 

 

리덕스를 사용하면, 

데이터를 가진 파일을 분리하고 import해서 사용하기 때문에 어느 위치의 컴포넌트라도 동일한 상태의 데이터를 참조할 수 있게 된다.

---

리덕스 키워드 개념

액션(Action)

데이터에 업데이트가 필요한 경우 액션(action)이 발생한다. 

액션의 이름(type)과 업데이트할 상태(data)를 정의하면 type으로 접근이 가능하다. 

{
    type : 'TOGGLE_VALUE',
    data : {
        id : 1, 
        text : 'redux action'
    }
}
{
    type : 'CHANGE_INPUT',
    text : '안녕하세요.'
}

 

액션 생성 함수(Action Creator)

위의 액션을 실행할 수 있는 객체를 만들어 주는 함수.

function actionToggle(data){
    return{
        type : 'TOGGLE_VALUE',
        data
    }
}

function actionInput(data){
    return{
        type : 'CHANGE_INPUT',
        text
    }
}

 

리듀서(Reducer)

액션이 발생했을 때 현재 상태와 전달받은 객체를 파라미터로 받고

두 값을 참고하여 업데이트한 상태를 반환.

//초기값 설정
const initialState = {
    counter:1
}

//리듀서 함수가 맨 처음 호출될 때에는 state = undefined
//state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action){
    switch (action.type) {
        case INCREMENT:
            return{
                counter : state.counter + 1
            }
            
        default:
            return state;
    }
}

INCREMENT액션이 발생했을 때 원래의 값(state)에 1을 더한 값을 반환하고, 

그 외의 액션이 발생했을 떄에는 업데이트하지 않은 원래의 값(state)을 그대로 반환한다.

 

 

스토어(store)

프로젝트에 리덕스를 적용하기 위해 스토어(store)를 사용한다.

한 개의 프로젝트에는 단 하나의 스토어만 가질 수 있고,

스토어를 통해 위에서 생성한 데이터 상태와 리듀서, 그 외 내장함수 등을 참조할 수 있다. 

const store = createStore(reducer);

 

디스패치(dispatch)

스토어 내장함수 중 하나로 액션을 발생시킬 때 호출한다. 

store.dispatch(reducer({type:'INCREMENT'}))

 

 

구독(subscribe)

스토어 내장함수 중 하나.

 

액선이 디스패치되어 상태가 업데이트 될 때마다 subscribe의 파라미터로 전달된 함수가 실행된다. 

const listener = () => {
    console.log('상태가 업데이트 되었습니다.'):
}

store.subscribe(listener);

 

---

리덕스 규칙

단일 스토어

하나의 애플리케이션 안에는 하나의 스토어만 있어야 한다. 

특정 부분을 완전히 분리시킬 때 여러개의 스토어를 만드는 경우가 있기는 하지만, 상태 관리가 복잡해질 수 있기 때문에 권장하지 않는다.

 

읽기 전용 상태

리덕스 상태는 읽기 전용이다.

리덕스는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문에,

상태 업데이트가 필요한 경우 불변성을 지켜주어야 한다. 

 

 

리듀서는 순수한 함수

• 리듀서함수는 이전 상태와 액션 객체를 파라미터로 받는다.
• 파라미터 외의 값에는 의존해선 안된다.
• 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객채를 만들어 반환한다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과를 반환해야 한다.

리듀서 함수 내부에서 랜덤값을 만들거나, Date함수 또는 네트워크 요청 등을 사용할 수 없다. 

파라미터가 같아도 다른 결과를 만들 수 있기 때문에 위와같은 작업은 리듀서 함수 바깥에서 처리해야 한다.

네트워크 요청과 같은 비동기 작업은 주로 미들웨어를 통해 관리

---

 

---

참조 :

리액트를 다루는 기술(김민준 / 길벗)