React 앱에서 Redux 사용예시 (Counter App)

(notes)

index.js의 최상위 root에 store 제공하기

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'; //import Provider from react-redux
import store from './store' //<- provide store
import './index.css';
import App from './App';

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

 

최상위 컴포넌트인 <App />에 store 을 제공했기 때문에 앱의 모든 하위, 그 이상 하위의 컴포넌트 모두에서 store의 state 에 접근할 수 있다.

 

 

 

컴포넌트에서 store 데이터에 접근하기

<Counter /> 컴포넌트에서 store에 접근하는 법

import { useSelector, useDispatch } from 'react-redux'
import classes from './Counter.module.css';

const Counter = () => {
  const dispatch = useDispatch()
  const counter = useSelector(state => state.counter); //executed by react-redux, select a specific part of return object of reducer
  //can get data in needed

  const incrementHandler = () => {
    dispatch({ type : 'increment' });
  }

  const decrementHandler = () => {
    dispatch({ type : 'decrement' });

  }
  const toggleCounterHandler = () => {};

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      <div className={classes.value}>-- {counter} --</div>
      <div>
        <button onClick={incrementHandler}> + </button>
        <button onClick={decrementHandler}> - </button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

 

위 코드를 통해 Counter component는 store을 자동으로 구독하게 되고, 필요한 데이터가 변경될 때 마다 컴포넌트는 자동으로 업데이트되고 최신의 데이터를 받게 된다.