Redux
Redux란?
가장 많이 사용하는 리액트 상태 관리 라이브러리이다.
컴포넌트의 상태 업데이트 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
컴포넌트끼리 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 쉽게 상태값을 전달하거나 업데이트할 수 있다.
이때 redux는 리액트에 종속되는 라이브러리가 아니고 다른 라이브러리와 프레임워크, 바닐라 자바스크립트와 함께 사용할 수 있다.
Redux 개념
action
상태를 업데이트하는데 필요한 정보를 담은 객체이다.
액션 객체는 반드시 type 프로퍼티를 가져야 하는데 이 값을 액션의 이름이라고 생각하면 된다.
액션 이름은 고유해야 한다액션 생성 함수
액션 객체를 반환하는 함수이다.
매번 액션 객체를 직접 작성하기 번거로울 수 있고, 실수를 방지하기 위해 액션 객체를 함수로 관리한다.리듀서
상태를 업데이트하는 함수이다.
현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환한다.
이때 현재 상태를 받는 첫 번째 인자에 초기 상태를 기본 인자로 설정한다.
state가 undefined일 때 초기 상태값이 사용된다.
인자로 받은 현재 상태의 불변성을 유지하면서 업데이트된 새로운 상태를 반환해야 한다.스토어
프로젝트에 리덕스를 적용하기 위해 store를 생성해야 한다.
createStore 함수의 인자로 root reducer를 넣어 호출한다.
스토어에는 상태와 리듀서가 있으며 여러 내장함수도 있다.import { createStore } from "redux"; const store = createStore(reducer); // store.getState(); -> 상태 접근 // store.dispatch(액션생성함수); -> 상태 업데이트 // store.subscribe(리스너 함수); -> 리스너 등록디스패치
dispatch는 스토어 내장 함수 중 하나로 액션을 dispatch하는 함수이다.
액션 객체를 인자로 받아 이를 리듀서 함수로 전달하여 실행하는 함수이다.구독
subscribe도 스토어 내장 함수 중 하나이다.
리스너 콜백 함수를 인자로 받아 호출하면, 액션이 dispatch되어 상태가 업데이트될 때마다 리스너 함수가 호출된다.
주의할점
단일 스토어
하나의 애플리케이션에는 하나의 스토어만 운영하는 것을 지향한다.
읽기 전용 상태
리덕스 상태는 읽기 전용이다.
즉, 기존 상태의 불변성을 유지하면서 업데이트된 새로운 상태를 생성해야 한다.리듀서는 순수한 함수
리듀서 함수는 현재 상태(state)와 액션 객체(action)를 인자로 받는다.
파라미터 외의 값에는 의존해선 안된다.
인자로 받은 상태는 건드리지 않고, 변화를 준 새로운 상태를 반환한다.
똑같은 인자로 호출되면 항상 똑같은 결과 값을 반환해야 한다.
