Redux는 JavaScript 애플리케이션용으로 특별히 설계된 강력한 상태 관리 라이브러리로 널리 알려져 있으며, 인기 있는 프레임워크인 React와 함께 자주 활용됩니다. Redux는 신뢰할 수 있는 상태 컨테이너를 제공함으로써 애플리케이션 상태 처리 및 문제 해결 작업을 크게 단순화하는 견고한 기반을 구축합니다. 이 가이드는 Redux를 구성하는 기본 구성 요소를 깊이 파고들어 각 요소에 대한 자세한 설명을 제공하고 이러한 요소가 어떻게 시너지적으로 상호 운용되어 애플리케이션의 전체 기능을 간소화하는지 보여줍니다. 이 심층 탐구의 목적은 Redux의 내부 작동 방식을 명확하게 하여 개발자가 이 상태 관리 도구의 복잡성을 파악하고 해당 기능을 프로젝트에서 효과적으로 활용할 수 있도록 지원하는 것입니다.

목차

1. Redux 소개
2. React 애플리케이션에서 Redux 설정
3. 작업 및 작업 유형
4. 리듀서 및 슬라이스
5. 스토어 구성
6. React 구성요소 연결
7. 결론 및 참고문헌

1. Redux 소개

Redux는 단방향 데이터 흐름 모델을 따르며 다음 세 가지 핵심 원칙을 기반으로 합니다.

• 단일 정보 소스: 전체 애플리케이션의 상태는 단일 저장소 내의 개체 트리에 저장됩니다. 이러한 중앙 집중화를 통해 애플리케이션 전체의 변경 사항을 디버그하고 추적하기가 더 쉬워졌습니다.
• 상태는 읽기 전용입니다: 상태를 변경하는 유일한 방법은 발생한 일을 설명하는 객체인 액션을 내보내는 것입니다. 이를 통해 상태 돌연변이를 예측하고 추적할 수 있습니다.
• 순수 함수로 변경이 이루어집니다.: 상태 트리가 작업에 의해 어떻게 변환되는지 지정하려면 순수 리듀서를 작성합니다. 순수 함수는 예측 및 테스트가 가능하므로 디버깅 및 단위 테스트가 단순화됩니다.

2. React 애플리케이션에서 Redux 설정

먼저 Redux와 React-Redux를 설치하세요:

npm install redux react-redux @reduxjs/toolkit

이 명령은 핵심 Redux 라이브러리, Redux용 React 바인딩 및 Redux 툴킷을 설치하여 저장소 설정 및 슬라이스 생성과 같은 많은 일반적인 작업을 단순화합니다.

3. 액션 및 액션 유형

작업은 애플리케이션에서 Redux 스토어로 데이터를 보내는 정보의 페이로드입니다. 액션 유형은 액션을 나타내는 상수입니다.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

작업과 작업 유형을 명확하게 정의하면 일관성을 유지하고 애플리케이션의 오류를 줄이는 데 도움이 됩니다.

4. 리듀서 및 슬라이스

리듀서는 스토어에 전송된 작업에 대한 응답으로 애플리케이션의 상태가 어떻게 변경되는지 지정합니다. 슬라이스는 Redux Toolkit의 createSlice 메소드를 사용하여 생성된 앱의 단일 기능에 대한 Redux 감속기 논리 및 작업 모음입니다.

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

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

export default counterSlice.reducer;

여러 조각을 결합하려면:

루트리듀서.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. 스토어 구성

스토어는 액션과 리듀서를 하나로 묶는 객체입니다. 애플리케이션 상태를 유지하고, getState()를 통해 액세스를 허용하고, dispatch(action)를 통해 업데이트하고, subscribe(listener)를 통해 리스너를 등록합니다.

store.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. React 컴포넌트 연결하기

React 구성 요소를 Redux 저장소에 연결하려면 React-redux의 Provider 구성 요소를 사용하여 저장소를 구성 요소에 전달하고 useSelector 및 useDispatch 후크를 사용하여 상태에 액세스하고 조작합니다.

App.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    
      

        
        

          Practice Redux with MusCo
        
        

          
          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. 결론 및 참고문헌

Redux는 애플리케이션의 상태를 관리하기 위한 강력한 라이브러리입니다. 작업, 리듀서, 저장소 및 모든 것을 React 구성 요소에 연결하는 방법을 이해하면 예측 가능하고 유지 관리 가능한 애플리케이션을 만들 수 있습니다.

키 포인트:

• 작업: 앱에서 어떤 일이 발생해야 하는지 정의합니다.
• 리듀서: 작업에 대한 응답으로 상태가 어떻게 변경되는지 지정합니다.
• 저장: 상태를 유지하고 작업을 처리합니다.
• 공급자: 저장소를 React 구성 요소에 전달합니다.

자세한 내용은 공식 Redux 문서를 확인하세요.

• Redux 문서
• Redux 툴킷 문서
• React-Redux 문서

이 가이드를 따르면 Redux에 대해 확실히 이해하고 이를 자신의 애플리케이션에 구현할 수 있습니다.