찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Redux 가이드: JavaScript 애플리케이션을 위한 강력한 상태 관리 라이브러리

Redux 가이드: JavaScript 애플리케이션을 위한 강력한 상태 관리 라이브러리

王林
王林원래의
2024-07-21 09:34:291147검색

Guide to Redux: A Robust State Management Library for JavaScript Applications

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 Redux 가이드: JavaScript 애플리케이션을 위한 강력한 상태 관리 라이브러리.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Redux 가이드: JavaScript 애플리케이션을 위한 강력한 상태 관리 라이브러리" 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">Coskuncelebi</span>
          </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();
                   }
                   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 구성 요소에 전달합니다.

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

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

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

위 내용은 Redux 가이드: JavaScript 애플리케이션을 위한 강력한 상태 관리 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript Object define for using Collection JS this table everything Access Foundation
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：LeetCode 명상: 회문 부분 문자열다음 기사：LeetCode 명상: 회문 부분 문자열

관련 기사

더보기