Redux는 JavaScript 애플리케이션용으로 특별히 설계된 강력한 상태 관리 라이브러리로 널리 알려져 있으며 인기 있는 프레임워크인 React와 함께 활용되는 경우가 많습니다. Redux는 신뢰할 수 있는 상태 컨테이너를 제공함으로써 애플리케이션 상태 처리 및 문제 해결 작업을 크게 단순화하는 견고한 기반을 구축합니다. 이 가이드 전반에 걸쳐 우리는 Redux를 구성하는 기본 구성 요소를 깊이 파고들어 각 요소에 대한 자세한 설명을 제공하고 이러한 구성 요소가 어떻게 시너지적으로 상호 운용되어 애플리케이션의 전체 기능을 간소화하는지 설명합니다. 이 심층 탐구의 목적은 Redux의 내부 작동 방식을 명확하게 하여 개발자가 이 상태 관리 도구의 복잡성을 파악하고 해당 기능을 프로젝트에서 효과적으로 활용할 수 있도록 지원하는 것입니다.
Redux 소개
React 애플리케이션에서 Redux 설정
작업 및 작업 유형
리듀서 및 슬라이스
스토어 구성
React 구성요소 연결
결론 및 참고문헌
Redux는 단방향 데이터 흐름 모델을 따르며 세 가지 핵심 원칙을 기반으로 합니다.
단일 정보 소스: 전체 애플리케이션의 상태는 단일 저장소 내의 객체 트리에 저장됩니다. 이러한 중앙 집중화를 통해 애플리케이션 전체의 변경 사항을 디버깅하고 추적하는 것이 더 쉬워졌습니다.
상태는 읽기 전용입니다. 상태를 변경하는 유일한 방법은 발생한 일을 설명하는 객체인 액션을 내보내는 것입니다. 이를 통해 상태 돌연변이를 예측하고 추적할 수 있습니다.
순수 함수로 변경이 이루어집니다. 상태 트리가 액션에 의해 어떻게 변환되는지 지정하려면 순수 리듀서를 작성합니다. 순수 함수는 예측 및 테스트가 가능하므로 디버깅 및 단위 테스트가 단순화됩니다.
먼저 Redux와 React-Redux를 설치하세요.
npm install redux React-redux @reduxjs/toolkit
이 명령은 핵심 Redux 라이브러리, Redux용 React 바인딩, Redux 툴킷을 설치하여 스토어 설정 및 슬라이스 생성과 같은 많은 일반적인 작업을 단순화합니다.
액션은 애플리케이션에서 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 });
작업과 작업 유형을 명확하게 정의하면 일관성을 유지하고 애플리케이션의 오류를 줄이는 데 도움이 됩니다.
리듀서는 스토어에 전송된 작업에 대한 응답으로 애플리케이션의 상태가 어떻게 변경되는지 지정합니다. 슬라이스는 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;
스토어는 액션과 리듀서를 하나로 묶는 객체입니다. 애플리케이션 상태를 보유하고, 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;
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;
Redux는 애플리케이션의 상태를 관리하기 위한 강력한 라이브러리입니다. 액션, 리듀서, 스토어 및 모든 것을 React 구성 요소에 연결하는 방법을 이해함으로써 예측 가능하고 유지 관리 가능한 애플리케이션을 만들 수 있습니다.
핵심 포인트:
작업: 앱에서 어떤 일이 일어나야 하는지 정의하세요.
리듀서: 작업에 대한 응답으로 상태가 어떻게 변경되는지 지정합니다.
Store: 상태를 보관하고 작업을 처리합니다.
공급자: 저장소를 React 구성 요소에 전달합니다.
프로젝트 파일:
여기서 내 GitHub 저장소에 저장된 프로젝트 파일에 액세스할 수 있습니다.
리덕스 카운터
자세한 내용은 공식 Redux 문서를 확인하세요.
Redux 문서
Redux 툴킷 문서
React-Redux 문서
이 가이드를 따르면 Redux에 대해 확실히 이해하고 이를 자신의 애플리케이션에 구현할 수 있습니다.
즐거운 코딩하세요!
해시노드와 미디엄에 게시
위 내용은 Master Redux: React 개발자를 위한 간단한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
