[ Redux 유용 ] 리액트 App에 손쉽게 store를 연결시켜주는 Provider 컴포넌트

Provider 컴포넌트로 리액트 앱에 store 연동

provider 는 react-redux 라이브러리에 내장된 리액트 애플리케이션에 손쉽게 스토어를 연동할 수 있도록 도와주는 컴포넌트 이다.

이 컴포넌트를 불러온 후 연동할 프로젝트의 최상위 컴포넌트 (이 프로젝트에서는 App 컴포넌트)를 감싸고,

provider 컴포넌트의 props 로 sotre 를 넣어주면 된다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import './index.css';

// 리덕스 관련 불러오기
import { createStore } from 'redux';
import reducers from './reducers';
import { Provider } from 'react-redux';

// 스토어 생성
const store = createStore(reducers);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

이제 리액트 컴포넌트에서 스토어를 사용할 준비가 끝났다.