Redux 실습

Taehye.on·2023년 4월 25일

React

코드스테이츠 44기

목록 보기

62/89

D-48

🔍 Redux 실습

아래 다섯가지를 구현하는 실습을 진행해보자.

Store
Reducer
Action
useDispatch
useSelector

🔍 index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { legacy_createStore as createStore } from 'redux';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

//2. action은 어떤 액션을 취할것인지 정의해놓은 객체다.
// type은 여기서 필수로 지정을 해주어야 하고 대문자로 작성한다.
// 구체적인 값을 전달할 경우 payload 작성한다.
// action을 직접 작성하기 보다는 action 객체를 생성하는 함수인 액션 생성자를 만든다.

// payload가 필요없을 경우
export const increase = () => {
  return {
    type: 'INCREASE',
  };
};

export const decrease = () => {
  return {
    type: 'DECREASE',
  };
};

// payload가 필요할 경우
const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num,
  };
};

//1. reducer는 dispatch에게 전달받은 action 객체의 type에 따라 상태를 변경시킨다.
const count = 1;
//reducer를 생성할때는 초기상태를 인자로 요구한다.
const reducer = (state = count, action) => {
  //Action 객체의 type에 따라 분기하는 switch 조건문이다.
  switch (action.type) {
    //action === 'INCREASE' 일 경우
    case 'INCREASE':
      return state + 1;

    //action ==='DECREASE' 일 경우
    case 'DECREASE':
      return state - 1;

    //action === 'SET_NUMBER' 일 경우
    case 'SET_NUMBER':
      return action.payload;

    //해당되는 경우가 없을땐 기존 상태 그대로 리턴
    default:
      return state;
  }
};
//reducer가 리턴하는 값이 새로운 상태가 된다

// 0. store는 상태가 관리되는 하나뿐인 저장소다.
const store = createStore(reducer);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

🔍 App.js

import React from 'react';
import './style.css';
import { useSelector, useDispatch } from 'react-redux';
import { increase, decrease } from './index.js';

export default function App() {
  //3. dispatch는 reducer로 action을 전달해주는 함수다.
  // dispatch의 전달인자로 action 객체가 전달된다.
  const dispatch = useDispatch()

   //4. useSelector()는 컴포넌트와 state를 연결하여 redux의 state에 접근할 수 있게 하는 메서드다.
  const counter = useSelector(state => state)

  const plusNum = () => {
    dispatch(increase())
  };

  const minusNum = () => {
    dispatch(decrease())
  };

  return (
    <div className="container">
      <h1>{`Count: ${counter}`}</h1>
      <div>
        <button className="plusBtn" onClick={plusNum}>
          +
        </button>
        <button className="minusBtn" onClick={minusNum}>
          -
        </button>
      </div>
    </div>
  );
}

❓ Error

App.js를 작성하던 중 아래와 같은 에러가 도출되었다.
src/App.js에 종료되지 않은 문자열 리터럴이 있다는 에러다.

import React from 'react';
import './style.css';
import { useSelector, useDispatch } from 'react-redux';
import { increase, decrease } from './index.js;