redux

1. 리덕스란?

리덕스는 상태(state) 관리 라이브러리입니다.

상태들을 전역적으로 만들어서 여기저기서 동일하게 사용가능하도록 해줍니다.

 

2. 전역 상태관리가 필요한 이유

1) 상태의 전역 관리

리액트는 무조건 부모에서 자식으로 흐르는 단방향으로 진행되며, 그러기 위해서 해당 컴포넌트에서 사용하지 않는 값이라도 자식에게 전달하기 위해 작성해야 하는 상황이 발생합니다. 이는 그 것의 이름이라도 하나 바꾸려면 그 값이 통과하는 모든 곳에서 바꾸어야 하는 매우 비생산적인 활동이 일어나고, 실수할 가능성도 매우 높아집니다.

2) 기능의 재사용성

화면에서 컴포넌트를 만들어서 ui를 재사용하는 것과 같이 state와 연관된 기능들을 재사용 가능하게 되어 활용도가 높아집니다.

 

3. 사전 개념

리덕스를 사용하기 위해 알아야하는 새로운 개념들이 있습니다. 이들을 먼저 이해하고 리액트에 적용해봅시다.

3-1) 액션(Action)

애플리케이션에서 사용하는 명령어(action type).

액션은 객체로 되어 있으며, type필드가 명령어 역할을 하고 나머지 데이터 들은 개발자 마음대로 작성하면 됩니다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

 

3-2) 액션 생성 함수

액션 객체를 만들어주는 함수. 파라미터로 값을 받아와서 만듭니다. 어떤 기능을 실행할 때 액션 객체를 매번 만들어야 하는 것이 번거로워 미리 만들어 두는 것입니다.

const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

3-3) 리듀서(reducer)

리듀서는 현재 상태(state)와 액션을 인자로 받아 새로운 state를 만들어내는 함수입니다.

const initialState = {
	counter: 1
};
function reducer(state = initialState, action) {
	switch(action.type) {
    	case INCREMENT:
        	return {
            	counter: state.counter + 1
            };
        default:
        	return state;
    }
}

3-4) 스토어(store)

프로젝트에 리덕스를 적용시켜줌. 애플리케이션 하나 당 하나의 스토어를 만듭니다. 스토어 안에는 현재의 state와 리듀서, 몇가지 내장 함수가 들어있습니다.

 

3-5) 디스패치(dispatch)

스토어의 내장 함수 중 하나. 액션을 발생시킴. 디스패치를 호출하면 스토어가 리듀서  함수를 실행시켜서 해당하는 action이 있으면 새로운 state를 반환

 

3-6) 구독(subscribe)

스토어의 내장 함수 중 하나.

subscribe는 함수 값을 인자로 받아서 액션이 디스패치 될때마다 인자로 받은 함수를 실행.

 

4. 리덕스의 원칙

4-1) 하나의 애플리케이션에는 하나의 스토어.

애플리케이션의 특정 부분을 완전히 분리시키려는 의도가 아니라면, 하나의 애플리케이션에는 하나의 스토어만 생성하는 것을 권장합니다. 불필요한 업데이트를 방지하기 때문입니다. 부득이하게 여러 개의 스토어를 만든다면, 개발도구를 활용할 수 없습니다.

4-2) 리듀서는 순수함수

순수함수는 동일한 인풋에 동일한 아웃풋이 나와야 합니다. 리듀서 자체는 순수함수로 유지하고 그 외의 사이드이펙트는 리덕스 미들웨어에서 처리합니다.

- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는 것 외에 다른 값에 의존하면 안됩니다.

- 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 state 객체를 만들어서 반환합니다.

- 동일한 인풋에 동일한 아웃풋

사이드 이펙트는 액션을 만들 때 사용하거나 리덕스 미들웨어에서 처리.