Redux - 상태 관리 라이브러리

Redux❓

Redux는 React 없이도 사용할 수 있는 상태 관리 라이브러리이다. Redux는, 전역 상태를 관리할 수 있는 저장소인 Store를 제공함으로써 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 하는 기존 리액트에서의 데이터흐름이 복잡해지는 문제를 해결할 수 있다.

Redux는 다음과 같은 순서로 상태를 관리한다.
1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성
2. 이 Action 객체는 Dispatch 함수의 인자로 전달
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달
4. educer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경
5. 상태가 변경되면, React는 화면을 다시 렌더링

즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 된다.

state : store에서 저장되어 있는 값.
action : 어떤 액션을 취할 것인지 정의해 놓은 객체
reducer : Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수
store : 상태가 관리되는 오직 하나뿐인 저장소

실습

---

src/index.js

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

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

export const increase = () => {
  return {
    type: 'INCREASE',
  };
};

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

const count = 1;

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (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가 리턴하는 값이 새로운 상태가 됩니다.
};

const store = createStore(counterReducer);

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

src/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() {
  const dispatch = useDispatch();
  const state = useSelector((state) => state);
  console.log(state); //확인용

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

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

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

Redux의 3가지 원칙

---

1. Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 와야 한다
Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙

2. State is read-only
상태는 읽기 전용이라는 뜻. React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음! 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙

3. Changes are made with pure functions
변경은 순수함수로만 가능하다. 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙.