Redux 실습

node redux 설치 명령어

npm install redux react-redux

 

Redux Store

import { configureStore } from 'redux';

// 2. state와 action에 대한 조치를 유발하는 reducer를 만든다.
const counterReudcer = (state = { counter: 0 }, action) => {
    if (action.type  === 'increment') {
       return {
        counter: state.counter + 1
       } 
    }

    if (action.type === 'decrement') {
        return {
            counter: state.counter - 1
        }
    }

    return state;

};

//1.  전역에서 딱 하나밖에 없는 전역관리 스토어를 만든다. 
const store = configureStore(counterReducer); // 3. 해당 리듀서를 포인트한다. 

export default store; // 4. store를 export함

-  configureStore()는 state를 관리하는 store를 만드는 function

- state에 변화를 주는 reducer function을 정의한뒤, configureStore에 매개변수로 넣어줌

- 해당 store를 전역에서 이용할 수 있도록 export 함

 

src/index.js Provider 설정

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/index'

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

- provider는 react-redux라이브러리에 있는 리액트앱에 store를 손쉽게 import할 수 있도록 도와주는 컴포넌트

 

useSelector

- 리액트 훅중 하나로, 스토어의 상태값을 반환하는 역할을 수행함.

const counter = useSelector(state => state.counter);

- useSelector()를 사용하는 순간에, 해당 컴포넌트를 위해 자동으로 구독을 설정함.

- 리덕스에서 상태 변경이 일어날때마다, 해당 컴포넌트가 자동으로 업데이트되고 최신 state값을 받게 됨.