Master Redux: React 개발자를 위한 간단한 가이드

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

목차

• Redux 소개

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

• 작업 및 작업 유형

• 리듀서 및 슬라이스

• 스토어 구성

• React 구성요소 연결

• 결론 및 참고문헌

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;

rootReducer.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 Master Redux: React 개발자를 위한 간단한 가이드.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Master Redux: React 개발자를 위한 간단한 가이드" classname="w-40 mx-auto mt-24 rounded-full">
        <h1 classname="container m-auto text-2xl 
            font-semibold text-center text-violet-700">
          Practice Redux with 
            <span classname="font-extrabold 
            text-violet-900">MusCo</span>
        </h1>
        <div classname="relative inline-block mt-8 text-sm">
          <counter></counter>
          <h5 classname="absolute bottom-0 right-0 mb-2 
                mr-2 font-semibold text-violet-700">
            <span classname="italic font-normal">by</span> 
            <span classname="font-semibold text-violet-900">Mus</span>tafa <span classname="font-semibold 
                text-violet-900">Co</span>skuncelebi
          </h5>
        </div>
      </div>
    </provider>
  );
}

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 
      <h1 classname="mb-3 text-3xl font-bold mt-7 
        text-violet-700">Counter</h1>
      <p classname="text-5xl text-violet-900">{number}</p>
      <div classname="flex mx-8 space-x-5" style="{{" justifycontent:>
        <button onclick="{()"> 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
        </button>
        <button onclick="{()"> 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
        </button>
      </div>
      <div classname="flex mx-8 mt-5 space-x-3 mb-7" style="{{" justifycontent: alignitems:>
        <div classname="p-5 space-x-5 rounded-md outline 
            outline-1 outline-violet-500">
          <input classname="w-40 h-10 pl-2 rounded-md outline 
                outline-1 outline-violet-500 text-violet-900" onchange="{(e)"> {
            let newValue = e.target.value.trim();
            if (newValue === "") {
              newValue = "";
              reset();
            }
            // Check the trimmed value consists only of digits
            if (/^\d*$/.test(newValue)) {
              setValue(newValue);
            }
          }} value={value} placeholder="Enter Value" />
          <button onclick="{()"> {
            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
          </button>
        </div>
      </div>
      <button onclick="{()"> {
        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
      </button>
      <h3 classname="text-violet-400" id="showcase" style="{{" visibility: marginbottom:>
        Counter cannot be less than 0
      </h3>
    
  );
}

export default Counter;

7. 결론 및 참고문헌

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

핵심 포인트:

작업: 앱에서 어떤 일이 일어나야 하는지 정의하세요.

리듀서: 작업에 대한 응답으로 상태가 어떻게 변경되는지 지정합니다.

Store: 상태를 보관하고 작업을 처리합니다.

공급자: 저장소를 React 구성 요소에 전달합니다.

프로젝트 파일:

여기서 내 GitHub 저장소에 저장된 프로젝트 파일에 액세스할 수 있습니다.
리덕스 카운터

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

Redux 문서

Redux 툴킷 문서

React-Redux 문서

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

즐거운 코딩하세요!

해시노드와 미디엄에 게시

위 내용은 Master Redux: React 개발자를 위한 간단한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!