Redux

리덕스 : 가장 많이 사용하는 리액트 상태 관리 라이브러리

-> 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음
-> 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있음
-> 전역 상태를 관리할 때 굉장히 효과적

키워드

액션(action)

상태에 어떠한 변화가 필요하면 액션이란 것이 발생. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이루어져 있음

{
	type: 'TOGGLE_VALUE',
    data: {
    	id: 1,
        text: '리덕스 배우기'
    }
}

{
	type: 'CHANGE_INPUT',
    text: '안녕하세요'
}

• type 필드를 반드시 가지고 있어야 함
• 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값임

액션 생성 함수

액션 객체를 만들어주는 함수

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

• 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 만들어야 함. 이를 함수로 만들어서 관리하자

리듀서(reducer)

변화를 일으키는 함수
액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아옴.
그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 줌.

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

스토어(store)

프로젝트에 리덕스를 적용하기 위해 스토어를 만든다.
한개의 프로젝트는 단 하나의 스토어만 가질 수 있음
스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇가지 중요한 내장 함수를 지님

디스패치(dispatch)

액션을 발생시키는 것.
디스패치는 스토어 내장 함수 중 하나
이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출함.
이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어줌

구독(subscribe)

스토어 내장 함수 중 하나
subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해주면 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

const listener = () => {
	consol.log('상태가 업데이트됨');
}
const unsubscribe = store.subscribe(listener);

unsubscribe(); //추후 구독을 비활성화할 때 함수를 호출

리덕스를 사용하여 리액트 애플리케이션 상태 관리하기

소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만,
프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있음

• 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 됨
• 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용
• 실제 업데이트가 필요한 컴포넌트만 리렌더링 되도록 쉽게 최적화해 줄 수도 있음.

리액트에서 리덕스를 사용할 때는 store 인스턴스를 직접 사용하기 보다는 주로 react-redux라는 라이브러리에서 제공하는
유틸함수(connect)와 컴포넌트(provider)를 사용하여 리덕스 관련 작업을 처리함.

작업 환경 설정

npm install react-redux
npm install --save redux-devtools-extension
npm install --save redux-actions // 액션생성함수 더 짧게 작성 가능
npm install --save immer // 불변성 관리

• 크롬 확장 프로그램 redux-devtools도 설치

UI 준비

리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것임.

프레젠테이셔널 컴포넌트
주로 상태관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트

컨테이너 컴포넌트
리덕스와 연동되어 있는 컴포넌트로, 리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치하기도 함

이러한 패턴은 리덕스를 사용하는데 필수는 아님. 다만 이 패턴을 사용하면 코드 재사용성도 높아지고, 관심사의 분리가 이루어짐