[React] Redux 기본 개념

✅ 기본개념

• 가장 많이 이용하는 리액트 상태 관리 라이브러리
• 전역 상태 관리할 때 굉장히 효과적
• Context API도 충분히 좋지만, 프로젝트 규모가 커지면 유지보수성과 효율 향상을 위해 Redux를 많이 사용
• 개발자 도구 및 미들웨어 기능을 제공해 비동기 작업을 효율적으로 관리
• 리액트에서 사용하려 만들어졌지만 다른 UI 라이브러리/프레임워크와 함께 사용 가능

✅ 기본용어

🌟 액션

• 상태에 변화가 필요하면 action 발생
• action 객체는 반드시 type 필드를 포함
• type 외에는 상태 업데이트시 참고할 값으로, 자유롭게 넣을 수 있음

{
    type : 'ADD_CONTENT',
    data : {
        title : 'Sample',
        body : '12345',
    }
}

🌟 액션 생성 함수

• 액션 객체를 만들어 주는 함수
• 변화에 따라 액션 객체를 만들어야 하는데, 매번 직접 작성은 비효율적이고 실수의 우려가 있어 함수로 만들어 관리

// 기본형
function addTodo(data) {
    return {
        type : 'ADD_CONTENT'.
        data
    };
}

// 화살표함수
const changeInput = (text) => ({
    type : 'CHANGE_INPUT',
    text
})

🌟 리듀서

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

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

🌟 스토어

• 프로젝트에 리덕스를 적용하기 위해 스토어를 만듦
• 한 개의 프로젝트에는 한 개의 스토어
• 현재 애플리케이션의 상태와 리듀서가 들어가 있고, 몇가지 내장 함수를 지님

🌟 디스패치

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

🌟 구독

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

✅ 리덕스의 세 가지 규칙

🔸 단일 스토어

• 하나의 애플리케이션에는 하나의 스토어
• 여러 개 만들 수도 있지만, 상태 관리가 복잡해져 권하지 않음

🔸 읽기 전용 상태

• 리덕스 상태는 읽기 전용
• state를 setState로 불변성을 지키며 업데이트 하듯,
• 리덕스도 기존 객체는 건드리지 않고 새로운 객체를 생성
• 이는 좋은 성능을 위해 리덕스가 내부적으로 데이터가 변경되는 것을 얕은 비교(shallow equality)검사로 감지하기 대문

🔸 리듀서는 순수한 함수

• 변화를 일으키는 리듀서가 순수한 함수라 함은
  • 이전 상태와 액션 객체를 파라미터로 받음
  • 파라미터 외의 값에는 의존하면 안됨
  • 이전 상태는 건드리지 않고, 새로운 상태 객체를 만들어 반환
  • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 같은 결과 값을 반환
• 예로 함수 내부에서 랜덤 값을 만들거나, 현재 시간을 가져오거나 네트워크 요청 등 수행시 매번 다른 결과가 나오므로 안됨
• 이같은 작업은 리듀서 함수 외부에서 처리