[ React redux 04 ] 리덕스 스토어 생성, 구독, 액션전달(dispatch)

01. 리덕스 스토어 생성

액션과 리듀서가 준비되면 리덕스 스토어를 만들수 있다. 맨 아래쪽에 다음 코드를 입력해보자.

// (...)

const { createStore } = Redux;

// 나중에 우리가 실제로 프로젝트에서 불러올 때는
// import { createStore } from 'redux';
// 이렇게 불러온다.

const store = createStore(counter);

스토어를 생성할 때는 createStore 함수를 사용한다. 파라미터는 리듀서 함수가 들어가고,

두 번째 파라미터를 설정하면 해당 값을 스토어의 기본 값으로 사용한다. 

이 파라미터를 생략하면 리듀서 초깃값을 스토어 기본 값으로 사용하게 된다.

02. 구독

리액트 컴포넌트에서 리덕스 스토어를 구독(subscribe)하는 작업은 나중에 react-redux의 connect함수가 대신한다.

따라서 리덕스의 내장함수 subscribe를 직접적으로 사용할 일은 별로 없지만,

여기서는 리덕스 개념을 이해하려고 직접 실행해보자.

리덕스 스토어를 구독한다는 것은 리덕스 스토어의 상태가 바뀔 때마다 특정 함수를 실행한다는 의미이다.

리덕스 스토어를 구독하여 상태가 바뀔 때의 상태를 콘솔에 기록하도록 코드를 입력해보자.

// (...)

const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

스토어를 구독할 때는 subscribe 함수를 사용하는데, 이 함수는 함수 형태의 파라미터를 받는다.

파라미터로 전달된 함수는 스토어 상태에 변화가 일어날 때마다 호출한다.

이 subscribe 함수가 호출되면 반환 값으로 구독을 취소하는 unsubscribe 함수를 반환한다.

나중에 구독을 취소해야 할 때는 unsubscribe()를 입력하여 호출하면 된다.

그리고 getState 함수는 현재 스토어 상태를 반환한다.

앞서 작성한 코드에는 스토어에 변화가 일어날 때마다 현재 상태를 읽어와서 콘솔에 기록하도록 설정해 주었는데,

아직까지는 아무 액션도 디스패치하지 않았기에 콘솔에 아무것도 나타나지 않는다.

03. dispatch로 액션 전달

스토어에 액션을 넣을 때는 store.dispatch 함수를 사용한다. 맨아래쪽에 아래 코드를 입력하고 Run 버튼을 눌러보자.

store.dispatch(increment(1));
store.dispatch(decrement(5));
store.dispatch(increment(10));

그러면 이 액션들이 디스패치될 때마다 우리가 방금 구독할 때 등록했던 함수를 실행할 것이다.

결과가 제대로 나왔는지 확인해보자.