redux이론2. store

목차

1. store란?
2. store 메서드(getState(), dispatch(), subscribe())
3. action 객체란?

 

 

1. store란?

1-1. 설명

• 앱의 전체 state 트리를 가지고 있는 저장소
• 저장소 안의 state를 바꾸는 유일한 방법은 action을 전달하는 것
• 저장소를 생성하기 위해서는 root reducing 함수를 createStore()메서드에 전달해야 함
• 객체

 

const store = createStore(reducer)
//const [state,dispatch] = useReducer(reducer, initialState)
//  두 코드는 비슷한 코드, store는 state와 dispatch라고 보면 됨



console.log(store)

// store는 객체이다.
// {
//     dispatch: [Function: dispatch],
//     subscribe: [Function: subscribe],
//     getState: [Function: getState],
//     replaceReducer: [Function: replaceReducer],
//     '@@observable': [Function: observable]
//   }

 

 

 

1-2. 문법

const store = createStore(reducer)

 

 

 

 

2. Store 메서드

2-1. store.getState()

• 앱의 현재 state 트리를 반환
• 저장소의 reducer가 마지막으로 반환한 값과 동일

 

 

 

2-2. store.dispatch(action)

• reducer에 action전달
• state 변경을 위한 유일한 방법은 dispatch 호출
• reducing 함수의 동기적 호출

1. store.dispatch(action) 호출
2. reducer({action}) 호출(store.getState()의 반환값과, 전달된 action과 함께)

 

<참고 >
reducer에서는 side effects가 허용되지 않기 때문에, action 전달 불가
action에 대한 응답으로 side effects를 발생시키고 싶다면 action 생산자 안에서 하는 것이 적절함

 

 

 

 

2-3. store.subscribe(listenter)

(1) 설명

• 변경사항에 대한 리스너 추가
• state 변경될 때마다 listener 호출(= dispatch 호출되면 listener 자동 호출)
•  

(2) 문법

• 매개변수: listener
• action이 전달되어 state 트리 변경될 때마다 호출할 callback 함수
• 현재의 state 트리를 읽기 위해 함수 내에서 getState() 호출 가능

const unsubscribe = store.subscribe(listener);

 

 

(3) listener 안에서 dispatch() 호출하는 법

1. listener는 특정 조건 하에서만 dispatch() 호출해야 함 <> 무한 루프
2. 구독자들은 매번 dispatch()가 호출되기 전 시점의 것들이 사용됨. listener 안에서 구독 또는 구독 취소를 하더라도 현재 진행중인 dispatch()에는 영향 없음 > 다음 idspatch() 호출 시에는 최신화 목록이 사용됨
3. listener 호출 전 중첩된 dispatch들이 state 여러번 업데이트 할 수 있음 > 리스너가 모든 state 변화를 반영하지 않을 수도 있음

 

 

(4) 구독 해지

• store.subscribe(listener)가 반환한 함수를 호출

let unsubscribe = store.subscribe(listener);
unsubscribe();

 

 

 

3. Action 객체

• 앱의 변경사항을 나타내는 일반적인 객체
• 저장소로 데이터를 보내는 유일한 방법
• 어떤 형태의 액션이 행해질 지 지시하는 type 필드가 반드시 존재해야 함
• type은 직렬화가 가능한 문자열 사용을 추천
• action으로 보내질 데이터의 예시

• UI 이벤트
• 네트워크 콜백
• 웹소켓 등