Redux - Store

Store

• 저장소는 App의 전체 상태 트리를 보유한다.
• 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 액션(Action)을 전달(dispatch)하는 것이다.
• 저장소는 클래스(class)가 아니다.
• 저장소를 생성하기 위해서는 createStore 함수를 Root에 전달한다.

---

Store Methods

getState()

애플리케이션의 현재 상태 트리를 반환한다. 저장소(store)의 리듀서(reducer)에 의해 반환된 마지막 값과 동일하다.

 

Returns

(any): 애플리케이션의 현재 상태 트리

---

dispatch(action)

액션을 전달한다. 상태 변경할 수 있는 유일한 방법이다.

 

Arguments

• action
  • 애플리케이션에 적합한 변경을 설명하는 객체이다.
  • action은 데이터를 저장소(store)로 가져오는 유일한 방법이므로 UI 이벤트, 네트워크 콜백, WebSocket과 같은 다른 소스의 모든 데이터는 결국 action으로 전달되어야 한다.
  • action은 수행 중인 작업의 type을 나타내는 type 값을 가져야 한다.
  • type을 상수로 정의하고 다른 모듈에서 가져올 수 있다.

 

• Returns
  • (Object): 전달된 action

 

Example

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)

change listener를 추가한다. action이 전달될 때마다 호출되며 상태 트리의 일부가 잠재적으로 변경되었을 수도 있다. 그런 다음 getState()를 호출하여 콜백 내부의 현재 상태 트리를 읽을 수 있다.

 

다음 주의사항과 함께 change listener로부터 dispatch()를 호출할 수 있다.

1. listener는 사용자 action에 대한 응답 또는 특정 조건(store가 특정 필드를 가지고 있을 때 action dispatching)에서만 dispatch()를 호출해야 한다. 조건 없이 dispatch()를 호출하는 것은 기술적으로 가능하지만 모든 dispatch() 호출이 일반적으로 listener를 다시 트리거하므로 무한 루프가 발생한다.
2. 구독(subscribe)은 모든 dispatch() 호출 직전에 스냅샷이 생성된다. listener가 호출되는 동안 구독(subscribe) 또는 구독 취소(unsubscribe)하면 현재 진행 중인 dispatch()에 영향을 미치지 않는다. 그러나 중첩 여부에 관계없이 다음 dispatch() 호출은 구독 목록의 최신 스냅샷을 사용한다.
3. listener가 호출되기 전에 중첩된 dispatch() 동안 상태가 여러번 업데이트 되었을 수 있으므로 listener는 모든 상태 변경사항을 볼 것으로 예상해서는 안된다. 그러나 dispatch()가 시작되기 전에 등록된 모든 구독자는 종료될 때 최신 상태로 호출된다.

change listener를 구독 취소(unsubscribe) 하려면 구독(subscribe)에서 반환된 함수를 호출한다.

 

 

Arguments

• listener (Function)
  • action이 전달되고 상태 트리가 변경 되었을 때마다 호출되는 콜백이다.
  • 이 콜백 내에서 getState()를 호출하여 현재 상태 트리를 읽을 수 있다.
  • 저장소(store)의 리듀서가 순수 함수라고 예상하는 것이 합리적이므로 상태 트리의 일부 깊은 경로에 대한 참조를 비교하여 값이 변경 되었는지 확인 할 수 있다.

 

Returns

(Function): change listener를 구독 취소(unsubscribe)하는 함수

 

 

Example

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()

---

[ 참고자료 ]

https://redux.js.org/api/store