React Redux - Store

BigbrotherShin·2020년 1월 5일
2

1. 개요

스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다.

디스패치 (dispatch)

store.dispatch(action)
  • 디스패치는 액션을 발생 시키는 것 이라고 이해하시면 됩니다.
  • dispatch 라는 함수에는 액션을 파라미터로 전달합니다.

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.

구독 (subscribe)

store.subscribe(listener);
  • subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다
  • subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다.

그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독합니다.

2. createStore

  • createStore는 스토어를 만들어주는 함수입니다.
  • 리액트 프로젝트에서는 단 하나의 스토어를 만듭니다.
import { createStore } from 'redux';

store.getState() & store.subscribe()

const store = createStore(reducer);

console.log(store.getState()); // 현재 store 안에 들어있는 상태를 조회합니다.

// 스토어안에 들어있는 상태가 바뀔 때 마다 호출되는 listener 함수
const listener = () => {
  const state = store.getState();
  console.log(state);
};

const unsubscribe = store.subscribe(listener);
// 구독을 해제하고 싶을 때는 unsubscribe() 를 호출하면 됩니다.

출처 [velopert]:(https://react.vlpt.us/redux/01-keywords.html)

profile
JavaScript, Node.js 그리고 React를 배우는

0개의 댓글