[Redux - 3] Store

리덕스의 Store는 리덕스 애플리케이션의 상태를 저장하고 관리하는 핵심적인 객체입니다. 

리덕스에서는 애플리케이션의 모든 상태가 이 하나의 스토어 내에 집중되어 있습니다. 

이를 통해 일관성 있는 상태 관리와 시간 여행 디버깅, 상태의 불변성 유지 등의 이점을 얻을 수 있습니다.

---

생성

createStore 함수를 사용하여 스토어를 생성합니다. 

이 함수는 리듀서와 초기 상태, 그리고 미들웨어나 enhancer와 같은 옵셔널 인자를 받을 수 있습니다.

import { legacy_createStore as createStore } from 'redux';
// 현재 공식문서에서는 createStore를 사용하려면 legacy_createStore를 임포트 해야합니다.
// as 문법을 써서 옛날처럼 createStore와 이름을 똑같이 사용합니다.

const store = createStore(reducer, initialState);

getState()

현재 스토어의 상태를 반환합니다.

const state = store.getState();

dispatch(action)

액션을 스토어에 전달하여 상태를 변경합니다. 전달된 액션은 해당하는 리듀서에 의해 처리되어 상태가 변경됩니다.

인자(매개 변수) 액션 객체. 보통 type 프로퍼티를 필수로 갖고 있습니다.

store.dispatch({ type: 'INCREMENT' });
// 액션 생성함수로도 넣어도 되겠죠?
// ex) store.dispatch(increment());

subscribe(listener)

스토어의 상태가 변경될 때마다 실행될 리스너 함수를 등록합니다.

listener는 상태 변경 시 호출되는 콜백 함수입니다.

 

여기서 반환값이 중요한데요,

구독을 해제하는 함수를 반환합니다. 이 함수를 호출하면 리스너의 구독이 취소됩니다.

const unsubscribe = store.subscribe(() => {
    console.log('State has changed:', store.getState());
});

// 나중에 구독을 해제하려면
unsubscribe();

replaceReducer(nextReducer)

실행 중인 애플리케이션의 리듀서를 교체합니다. 주로 코드 분할, 레이지 로딩, 리듀서 핫 리로딩 시 사용됩니다.

nextReducer는 새로 사용될 리듀서 함수입니다. 반환값은 없습니다.

store.replaceReducer(newReducer);