TIL-2024.07.11 - React - redux 기초

 

 

 

 

 

 

목표

- redux 기본 사용법

 

 

기본 사용법

 

1. store.js 설정

import {createStore} from 'redux';

const counterReducer = (state = {counter: 0}, action) => {
    if(action.type === 'increment') {return {counter: state.counter+1}}
    else if(action.type === 'decrement') {return {counter: state.counter - 1}}
    return state;
};

const store = createStore(counterReducer);

export default store;

 

 

 

2. 사용할 component에 적용 

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

const Counter = () => {
  const toggleCounterHandler = () => {};
    const {counter} = useSelector(state => state); // redux store 의 state 조회하며, 변화를 감지하는 hook
    const dispatch = useDispatch();
    const toggleCounterHandler = () => {

    };

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

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

export default Counter;

 

 

 

3. 최상위 root (index.js) 설정

import React from 'react';
import ReactDOM from 'react-dom/client';

import {Provider} from "react-redux";
import './index.css';
import App from './App';
import store from "./store";

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