이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →
Store
스토어는 애플리케이션의 전체 상태 트리를 보유합니다. 내부 상태를 변경하는 유일한 방법은 액션을 디스패치하여 루트 리듀서 함수를 트리거하고 새로운 상태를 계산하는 것입니다.
스토어는 클래스가 아닙니다. 몇 가지 메서드를 가진 단순한 객체입니다.
스토어를 생성하려면 루트 리듀서 함수를 Redux Toolkit의 configureStore 메서드에 전달하세요. 이는 적절한 기본 설정으로 Redux 스토어를 구성합니다. (Redux Toolkit을 아직 사용하지 않는다면 원본 createStore 메서드를 사용할 수 있지만, 가능한 한 빨리 Redux Toolkit으로 마이그레이션할 것을 권장합니다)
스토어 메서드
getState()
애플리케이션의 현재 상태 트리를 반환합니다. 이는 스토어의 리듀서가 마지막으로 반환한 값과 동일합니다.
반환값
(any): 애플리케이션의 현재 상태 트리
dispatch(action)
액션을 디스패치합니다. 상태 변경을 트리거하는 유일한 방법입니다.
스토어의 리듀서 함수는 현재 getState() 결과와 주어진 action을 동기적으로 받아 호출됩니다. 반환 값은 다음 상태로 간주되며, 이후 getState() 호출 시 반환되고 변경 리스너가 즉시 알림을 받습니다.
리듀서 내부에서 dispatch를 호출하려고 하면 "Reducers may not dispatch actions." 오류가 발생합니다. 리듀서는 순수 함수로, 오직 새로운 상태 값을 반환해야 하며 부수 효과(디스패치는 부수 효과)를 발생시켜서는 안 됩니다.
Redux에서 구독(subscription)은 루트 리듀서가 새로운 상태를 반환한 후 호출되므로, 구독 리스너 내부에서는 디스패치가 _가능_합니다. 리듀서 내부에서는 부수 효과가 없어야 하므로 디스패치가 금지됩니다. 액션에 대한 응답으로 부수 효과를 발생시키려면 잠재적으로 비동기적인 액션 생성자에서 처리하는 것이 올바른 방법입니다.
인자
action(Object†): 애플리케이션에 의미 있는 변경을 설명하는 일반 객체입니다. 데이터를 스토어에 전달하는 유일한 방법이 액션이므로, UI 이벤트, 네트워크 콜백, WebSockets 등의 모든 데이터는 최종적으로 액션으로 디스패치되어야 합니다. 액션은 수행할 액션 유형을 나타내는type필드를 반드시 가져야 합니다. 유형은 상수로 정의하고 다른 모듈에서 가져올 수 있습니다.type에는 Symbols보다 문자열을 사용하는 것이 좋습니다. 문자열은 직렬화가 가능하기 때문입니다.type외에 액션 객체의 구조는 개발자에게 달려 있습니다. 관심이 있다면 Flux Standard Action에서 액션 구성 방법에 대한 권장 사항을 참고하세요.
반환값
(Object†): The dispatched action (see notes).
참고 사항
† The “vanilla” store implementation you get by calling createStore only supports plain object actions and hands them immediately to the reducer.
하지만 createStore를 applyMiddleware로 래핑하면 미들웨어가 액션을 다르게 해석하고 비동기 액션 디스패치를 지원할 수 있습니다. 비동기 액션은 일반적으로 Promise, Observable, thunk와 같은 비동기 프리미티브입니다.
미들웨어는 커뮤니티에서 생성되며 Redux에 기본적으로 포함되지 않습니다. 사용하려면 redux-thunk나 redux-promise 같은 패키지를 명시적으로 설치해야 합니다. 자신만의 미들웨어를 직접 생성할 수도 있습니다.
비동기 API 호출을 처리하는 방법, 액션 생성자 내부에서 현재 상태를 읽는 방법, 사이드 이펙트 수행 방법, 또는 작업을 순차적으로 실행하는 방법에 대해서는 applyMiddleware의 예제를 참조하세요.
예제
import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux'])
function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))
subscribe(listener)
변경 리스너를 추가합니다. 이 리스너는 액션이 디스패치될 때마다 호출되며, 상태 트리의 일부가 변경되었을 가능성이 있습니다. 콜백 내부에서 getState()를 호출해 현재 상태 트리를 읽을 수 있습니다.
변경 리스너에서 dispatch()를 호출할 수 있지만 다음 주의사항이 적용됩니다:
-
리스너는 사용자 액션에 대한 응답이나 특정 조건(예: 스토어에 특정 필드가 있을 때 액션 디스패치) 하에서만
dispatch()를 호출해야 합니다.dispatch()를 조건 없이 호출하는 것은 기술적으로 가능하지만, 모든dispatch()호출이 리스너를 다시 트리거하므로 무한 루프가 발생할 수 있습니다. -
구독 목록은 매번
dispatch()호출 직전에 스냅샷됩니다. 리스너 실행 중에 구독을 추가/제거해도 현재 진행 중인dispatch()에는 영향을 미치지 않습니다. 그러나 중첩 여부와 관계없이 다음dispatch()호출에는 최신 구독 목록 스냅샷이 사용됩니다. -
리스너는 모든 상태 변경을 볼 수 있다고 기대해서는 안 됩니다. 중첩된
dispatch()동안 상태가 여러 번 업데이트될 수 있기 때문입니다. 다만dispatch()시작 전에 등록된 모든 구독자는 종료 시점에 최신 상태로 호출된다는 것이 보장됩니다.
이것은 저수준 API입니다. 직접 사용하기보다는 React(또는 다른) 바인딩을 사용할 가능성이 높습니다. 상태 변경에 반응하는 콜백을 자주 사용한다면 커스텀 observeStore 유틸리티 작성을 고려해 보세요. 또한 Store는 Observable이므로 RxJS 같은 라이브러리로 변경 사항을 subscribe할 수 있습니다.
변경 리스너를 구독 해제하려면 subscribe가 반환한 함수를 호출하세요.
인자
listener(Function): 액션이 디스패치될 때마다 호출될 콜백 함수. 상태 트리가 변경되었을 수 있습니다. 이 콜백 내부에서getState()를 호출해 현재 상태를 읽을 수 있습니다. 스토어의 리듀서는 순수 함수이므로 상태 트리의 특정 깊은 경로를 참조 비교해 값 변경 여부를 확인하는 것이 합리적입니다.
반환값
(Function): 변경 리스너의 구독을 해제하는 함수.
예제
function select(state) {
return state.some.deep.property
}
let currentValue
function handleChange() {
let previousValue = currentValue
currentValue = select(store.getState())
if (previousValue !== currentValue) {
console.log(
'Some deep nested property changed from',
previousValue,
'to',
currentValue
)
}
}
const unsubscribe = store.subscribe(handleChange)
unsubscribe()
replaceReducer(nextReducer)
스토어에서 상태를 계산하는 데 사용되는 현재 리듀서를 교체합니다.
고급 API입니다. 앱에서 코드 스플리팅을 구현하고 일부 리듀서를 동적으로 로드하려는 경우, 또는 Redux용 핫 리로딩 메커니즘을 구현할 때 필요할 수 있습니다.
인자
nextReducer(Function): 스토어에서 사용할 다음 리듀서.