[Redux] 리덕스 정리

리덕스 툴킷을 다시 배우려고 정리 좀 했다.

useSelector = 리덕스 라이브러리 내장된 함수로 리듀서에 있는 state값을 불러오는 함수.

useDispatch = 리덕스 라이브러리 내장된 함수로 리듀서 값을 변경시키는 명령 함수.

 

왜 리덕스가 어렵냐 하면 보일러 플레이트가 많은 상태에서 실질적으로 용어가 많은데, 쓰임을 모르겠으니 헤매는 것.

 

action은 payload를 가지고 있는데, 가르칠때 action도 같이 가르치니 이해가 안된상태에서 헤매게 되는 것.

쉽게 말하면 dispatch 사용하는 것을 action인데, 이를 다른 것처럼 설명하니 헤매게 되는 것이다.

dispatch = action이라고 이해하면 편하다.

 

최상단 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import './index.css';
import App from './App';

import store from './store';

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

 

 

리듀서와 store

import { createStore } from 'redux';

// 단일스토어 단일 리듀서(리듀서는 한개지만 여기에 여러개를 호출하는 방식으로 사용)
const counterReducer = (state = { counter: 0 }, action) => { // state 기본값이 없으면 뷰에서 호출시 state.counter가 없다고 뜬다.
    if(action.type === 'increment') {
        return {
            counter: state.counter +1,
        };
    }

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

    return state;
};

const store = createStore(counterReducer); // store 안에 리듀서를 인자로 넣어야 작동한다.

export default store;

 

view counter

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

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.counter);

  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}>increment</button>
        <button onClick={decrementHandler}>decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

 

폴더 구조

프로젝트

ㄴindex.js

ㄴcomponents

---counter.js

ㄴstore

---index.js