Redux를 왜 사용할까?

Redux(리덕스)란?

Redux(리덕스)란 javascript 상태(컴포넌트 내부에서 사용하는 데이터)관리 라이브러리이다.
props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리이다.

Reducx의 3가지 원칙

single source of truth

• 동일한 데이터는 항상 같은 곳에서 가지고 와야한다.
• 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있다.

State is read-only

• 읽기 전용이라는 의미이다.
• Action 객체가 있어야 상태를 변경할 수 있다.

Changes are made with pure functions

• 변경은 순수함수로만 가능하다.
• 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되야하는 reducer와 연결되는 원칙이다.

Store, Action, Reducer의 의미와 특징

⭐️ Store (스토어)

• Store는 상태가 관리되는 하나의 공간이다. (state들이 store에 객체형식으로 저장된다.)

⭐️ Action (액션)

• action은 Store에 운반할 데이터를 말한다. (객체형식)
• 필요에 따하 payload를 작성해 구체적인 값을 전달하기도 한다.

⭐️ Reducer (리듀서)

• Reducer는 Dispatch에서 전달받은 Action 객체의 type에 따라 상태를 변경시키는 함수이다.
• 순수함수(동일한 입력이 주어지면 항상 동일한 출력을 반환하는 함수)여야 한다.
  -> 외부 요인으로 인해 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문이다.

⭐️ Dispatch (디스패치)

• Dispatch는 Store의 내장함수 중 하나이다.
• Action을 파라미터로 전달하고 Reducer를 호출한다.

//main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { store } from "./store.js";
import { Provider } from "react-redux";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
);

// app.jsx
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementByAmount } from "./store";

export default function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <main>
      <h1>Redux Toolkit Counter</h1>
      <div>
        <button onClick={() => dispatch(decrement())}>-</button>
        <span>{count}</span>
        <button onClick={() => dispatch(increment())}>+</button>
      </div>
      <div>
        <button onClick={() => dispatch(incrementByAmount(5))}>
          Increment by 5
        </button>
      </div>
    </main>
  );
}

// store.js
import { configureStore, createSlice } from "@reduxjs/toolkit";

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});