- 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다.
- 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.
- 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다.
- 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적입니다.
- 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해 주기 때문입니다.
- 추가로 아주 편리한 개발자 도구도 지원하며,
- 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해 주기도 합니다.
개념 미리 정리하기
- 액션 객체는 type 필드를 반드시 가지고 있어야 합니다.
- 액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수입니다.
- 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 이를 함수로 만들어서 관리합니다.
- 리듀서(reducer)는 변화를 일으키는 함수입니다.
- 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옵니다.
- 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 줍니다.
- 프로젝트에 리덕스를 적용하기 위해 스토어(store)를 만듭니다.
- 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 지닙니다.
- 디스패치(dispatch)는 스토어의 내장 함수 중 하나입니다.
- 디스패치는 ‘액션을 발생시키는 것’이라고 이해하면 됩니다.
- 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줍니다.
- 구독(subscribe)도 스토어의 내장 함수 중 하나입니다.
- subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출됩니다.
리액트 없이 쓰는 리덕스
프로젝트, UI 구성하기
DOM 레퍼런스 만들기
- 이번 프로젝트에서는 UI를 관리할 때 별도의 라이브러리를 사용하지 않기 때문에 DOM을 직접 수정해 주어야 합니다.
액션 타입과 액션 생성 함수 정의
- 프로젝트의 상태에 변화를 일으키는 것을 액션이라고 합니다.
- 먼저 액션에 이름을 정의해 주겠습니다.
- 액션 객체는 type 값을 반드시 갖고 있어야 한다.
초깃값 설정
const initialState = {
toggle : false,
counter : 0
}
리듀서 함수 정의
- 리듀서는 변화를 일으키는 함수입니다.
- 함수의 파라미터로는 state와 action 값을 받아 옵니다.
- initialState로 초기값을 지정.
- spread(...) 연산자로 불변성 유지.
function reducer(state = intialState, action) {
switch(action.type){
case TOGGLE_SWITCH:
return {
...state,
toggle : !state.toggle
}
case INCREASE:
return {
...state,
counter : state.counter + action.difference
}
case DECREASE:
reutnr {
...state,
counter: state.counter -1
}
default :
return state
}
}
스토어 만들기
- createStroe 함수 사용. 파라미터엔 리듀서 함수 넣어 주어야 한다.
import {createStore} from 'redux';
...
const store = createStore(reducer);
render 함수 만들기
- 상태가 업데이트 될 때, 즉 dispatch에 의해 action 함수 생성될 때마다 호출.
const render = () => {
const state = store.getState(); // 현재 상태 불러오기.
if(state.toggle){
divToggle.classList.add('active')
} else{
divToggle.classList.remove('active')
}
counter.innerText = state.counter;
}
render();
구독하기
- 스토어의 상태가 바뀔 때마다 render함수 호출되도록 해준다.
- subscribe 사용. 함수 파라미터로 함수 형태의 값을 전달.
- 전달된 함수는 추후 액션이 발생하여 상태가 업데이트될 때마다 호출. => dispatch 호출 시에
액션 발생시키기 ( =디스패치 )
- 스토어의 내장함수 dispatch 사용. 파라미터는 액션 객체를 넣어 준다.
리덕스의 3가지 규칙
1. 단일 스토어
2. 읽기 전용 상태
- 상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다.
- 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문에. -> 겉핥기 식으로 비교하여 좋은 성능 유지
3. 리듀서는 순수한 함수
- 순수한 함수
- 이전 상태와 액션 객체를 파라미터로 받는다.
- 파라미터 외의 값에는 의존하지 않는다.
- 이전 상태는 건드리지 않고 변화를 준 새로운 상태 객체를 만들어 반환한다. (불변성 유지)
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값 반환해야 한다. (불변성 유지)
- 이것 외에 랜덤 값, Date 함수, 네트워크 요청 등은 파라미터가 같아도 다른 결과를 만들어 낼 수있다.
- 리듀서 함수 바깥에서 처리. 혹은 리덕스 미들웨어에서 처리한다.