`createStore(reducer, preloadedState?, enhancer?)`

앱의 전체 상태 트리를 보관하는 Redux 스토어를 생성합니다. 앱에는 단 하나의 스토어만 존재해야 합니다.

위험

기본 Redux 코어의 createStore 메서드는 더 이상 권장되지 않습니다!

createStore는 계속 작동하지만, createStore나 원본 redux 패키지를 직접 사용하는 것은 권장하지 않습니다.

대신 공식 Redux Toolkit 패키지의 configureStore 메서드를 사용하세요. 이는 createStore를 래핑하여 더 나은 기본 설정과 구성 방식을 제공합니다. 또한 리듀서 로직 작성에는 Redux Toolkit의 createSlice 메서드를 사용해야 합니다.

Redux Toolkit은 redux 패키지의 다른 모든 API도 다시 내보냅니다.

기존 레거시 Redux 코드베이스를 Redux Toolkit으로 업데이트하는 방법은 현대적인 Redux로 마이그레이션 페이지를 참조하세요.

인자

reducer (Function): 현재 상태 트리와 처리할 액션을 받아 다음 상태 트리를 반환하는 루트 리듀서 함수입니다.
[preloadedState] (any): 초기 상태입니다. 유니버설 앱에서 서버의 상태를 가져오거나 직렬화된 사용자 세션을 복원할 때 선택적으로 지정할 수 있습니다. combineReducers로 reducer를 생성한 경우, 전달된 키와 동일한 구조를 가진 일반 객체여야 합니다. 그렇지 않으면 reducer가 이해할 수 있는 모든 값을 자유롭게 전달할 수 있습니다.
[enhancer] (Function): 스토어 확장자입니다. 미들웨어, 시간 이동, 지속성 등 서드파티 기능으로 스토어를 강화하기 위해 선택적으로 지정할 수 있습니다. Redux에 기본 제공되는 유일한 스토어 확장자는 applyMiddleware()입니다.

반환값

(Store): 앱의 전체 상태를 보관하는 객체입니다. 상태를 변경하는 유일한 방법은 액션 디스패치입니다. 상태 변경을 구독하여 UI를 업데이트할 수도 있습니다.

예제

import { createStore } from 'redux'

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

const store = createStore(todos, ['Use Redux'])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]

사용 중단 및 대체 `legacy_createStore` 내보내기

Redux 4.2.0에서 원본 createStore 메서드를 @deprecated로 표시했습니다. 엄밀히 말해 이는 호환성을 깨뜨리는 변경이 아니며 5.0에서 새로 추가된 것도 아니지만, 완전성을 위해 여기에 문서화합니다.

이 사용 중단 표시는 사용자가 레거시 Redux 패턴에서 현대적인 Redux Toolkit API 사용으로 마이그레이션하도록 장려하기 위한 시각적 표시일 뿐입니다. 사용 중단 표시는 가져와 사용할 때 ~~createStore~~처럼 시각적 취소선으로 나타나지만, 런타임 오류나 경고는 발생하지 않습니다.

createStore는 계속 무기한 작동하며 절대 제거되지 않습니다. 하지만 현재 우리는 모든 Redux 사용자가 Redux 로직에 Redux Toolkit을 사용하기를 권장합니다.

이 문제를 해결하는 세 가지 방법:

Redux Toolkit 및 configureStore로 전환하라는 우리의 강력한 제안을 따르세요
아무것도 하지 않아도 됩니다. 이는 단순히 시각적으로 취소선이 표시되는 것일 뿐이며, 코드 동작에는 영향을 미치지 않습니다. 무시해도 됩니다.
이제 내보내지는 legacy_createStore API로 전환하세요. 이는 @deprecated 태그가 없는 동일한 함수입니다. 가장 간단한 방법은 별칭을 사용하여 임포트하는 것입니다. 예: import { legacy_createStore as createStore } from 'redux'

활용 팁

애플리케이션에서 하나 이상의 스토어를 생성하지 마세요! 대신, combineReducers를 사용하여 여러 리듀서를 하나의 루트 리듀서로 결합하세요.
Redux 상태는 일반적으로 일반 JS 객체와 배열입니다.
상태가 일반 객체인 경우, 절대 변이(mutate)하지 마세요! 불변성(Immutable) 업데이트는 일반적으로 객체 스프레드 연산자( return { ...state, ...newData } )를 사용하여 데이터의 각 레벨을 복사해야 합니다.
서버에서 실행되는 유니버설 앱(universal apps)의 경우, 매 요청마다 스토어 인스턴스를 생성하여 격리시켜야 합니다. 스토어 인스턴스에 데이터를 가져오는 액션을 몇 개 디스패치(dispatch)하고, 서버에서 앱을 렌더링하기 전에 이들이 완료될 때까지 기다리세요.
스토어가 생성될 때, Redux는 초기 상태로 스토어를 채우기 위해 리듀서에 더미 액션을 디스패치합니다. 이 더미 액션을 직접 처리할 필요는 없습니다. 리듀서의 첫 번째 인자로 전달된 상태가 undefined일 경우 초기 상태를 반환해야 한다는 점만 기억하면 됩니다.
여러 개의 스토어 인핸서(store enhancers)를 적용하려면 compose()를 사용할 수 있습니다.

인자​

반환값​

예제​

사용 중단 및 대체 legacy_createStore 내보내기​

활용 팁​

인자

반환값

예제

사용 중단 및 대체 `legacy_createStore` 내보내기

활용 팁