Redux State Management 란 무엇입니까?

Redux는 JavaScript 응용 프로그램의 상태를 중앙 관리하는 데 사용되는 도구로, 대규모 프로젝트의 구성 요소 간의 의사 소통이 빈번하고 상태를 유지하기가 어렵다는 상황에 적합합니다. 1. 단일 데이터 소스를 제공하고 모든 상태는 통합 저장소에 저장됩니다. 2. 상태는 읽기 전용이며 업데이트 의도는 조치를 통해 설명됩니다. 3. 순수한 기능 감소기를 사용하여 상태 변경을 수행하십시오. 실제 개발에서 Redux Toolkit 및 React-Redux는 종종 운영을 단순화하기 위해 결합되지만 모든 프로젝트를 사용해야하는 것은 아닙니다. 환원제에서의 글로벌 상태 남용과 부작용은 피해야합니다.

Redux는 JavaScript 응용 프로그램을위한 주 관리 도구로서 개발자가 응용 프로그램에서 State (State)를보다 쉽게 ​​관리하고 유지 관리 할 수 ​​있도록 도와줍니다. 전체 응용 프로그램에서 공유 해야하는 데이터를 중앙 저장하는 데 사용되는 글로벌 "저장소"로 이해할 수 있습니다.

원래 React와 함께 사용되었지만 현재 다른 프레임 워크 및 기본 JS 프로젝트에서 널리 사용됩니다. 핵심 개념은 단일 데이터 소스, 읽기 전용 상태 및 순수한 기능을 통한 상태 업데이트입니다 .

Redux가 필요한 이유는 무엇입니까?

Redux가 없으면 소규모 프로젝트는 구성 요소 (예 : React의 usestate 또는 usereducer) 내에서 상태 관리를 직접 사용할 수 있지만 프로젝트가 커지고 구성 요소가 자주 통신하면 다음을 찾을 수 있습니다.

• 상태가 여러 구성 요소에 퍼져 추적하기가 어렵습니다.
• 구성 요소 간의 값 전송은 복잡해지며, 층별로 소품 층을 전달하는 것은 매우 번거 롭습니다.
• 동일한 데이터가 다른 구성 요소에 의해 수정 될 수 있으며 오류는

현재 Redux는 유용합니다. 이곳은 주를 저장하기위한 통일 ​​된 장소를 제공하고 이러한 상태를 읽고 업데이트하는 방법을 지정하여 상태 변경이보다 예측 가능하고 디버그하기 쉽습니다.

Redux의 세 가지 핵심 개념

1. 상점

Store는 Redux의 핵심이며 전체 응용 프로그램 상태를 저장하는 객체입니다. 전체 응용 프로그램에는 하나의 상점 만있을 수 있으며 모든 주가 여기에 존재합니다. "뇌"또는 "중앙 데이터베이스"라고 생각할 수 있습니다.

• 생성 메소드는 일반적으로 createStore(reducer) (지금 Redux Toolkit을 사용하는 것이 좋습니다).
• store.getState() 를 통해 현재 상태를 얻을 수 있습니다.
• 업데이트 상태는 store.dispatch(action) 를 통해 작업을 보내는 데만 사용될 수 있습니다.

2. 행동

동작은 무슨 일이 일어나고 있는지 설명하는 일반적인 물체입니다. 수행 할 작업 유형을 나타내는 type 필드가 있어야하며 특정 데이터를 나타내는 payload 있을 수도 있습니다.

예를 들어:

 {유형 : '증분', 페이로드 : 1}

당신은 그것을 "명령"으로 이해하고 Redux에게 내가하고 싶은 일을 말할 수 있습니다.

3. 감속기

감속기는 현재 상태와 동작을 수신 한 다음 새 상태를 반환하는 순수한 함수입니다. 실제로 상태를 바꿀 수있는 유일한 곳입니다.

그 구조는 대략적으로 다음과 같습니다.

 함수 반복 사용자 (state = initialstate, action) {
  스위치 (action.type) {
    사례 '증분':
      반환 {... state, count : state.count action.payload};
    기본:
      반환 상태;
  }
}

참고 : 감속기는 순수한 기능이어야하며 부작용이 없어야합니다 .

실제 개발에 사용하는 방법은 무엇입니까?

실제 프로젝트에서는 일반적으로 원래 Redux API를 직접 사용하지 않고 일부 도구 나 라이브러리를 결합하여 다음과 같은 작업을 단순화합니다.

• Redux Toolkit : 공식 권장 방법에는 CreateAction, CreatesLice 등과 같은 내장 기능이 있으며, 이는 보일러 플레이트 코드를 크게 줄입니다.
• React-Redux : React 구성 요소 및 Redux Store를 연결하는 데 사용됩니다. useSelector 및 useDispatch 일반적으로 상태 및 발송 조치를 얻는 데 사용됩니다.

간단한 예를 들기 위해 :

 'react-redux'에서 {useelector, usedispatch} import;
'./counterslice'에서 {ycrement} 가져 오기;

기능 카운터 () {
  const count = useelector ((state) => state.counter.value);
  const dispatch = usedispatch ();

  반품 (
    <div>
      <p> {count} </p>
      <버튼 onclick = {() => dispatch (증착 (1))}> 1 </button>
    </div>
  );
}

일반적인 오해와 제안

• 모든 프로젝트에 Redux가 필요한 것은 아닙니다 . 응용 프로그램이 크지 않거나 상태 논리가 복잡하지 않은 경우 먼저 React의 자체 상태 관리 솔루션을 사용할 수 있습니다.
• 글로벌 상태를 남용하지 마십시오 : 일부 데이터는 구성 요소 내에서만 사용해야하며,이를 Redux에 넣을 필요가 없습니다. 그렇지 않으면 복잡성을 증가시킵니다.
• READER 유지 순수한 상태 : 비동기 작업을 수행하거나 API를 호출하거나 매개 변수를 수정하지 마십시오. 이들은 Redux-Thunk 또는 Redux-Saga와 같은 미들웨어로 넘겨야합니다.
• 합리적인 분할 감속기 : 상태가 증가함에 따라 combineReducers 사용하여 다른 감속기를 모듈로 분할하여 유지 보수를 쉽게 할 수 있습니다.

기본적으로 그게 다야. Redux는 처음에는 약간 추상적이지만, 일단 디자인 아이디어를 이해하면 실제로 직관적이라는 것을 알게 될 것입니다. 열쇠는 사용시기와 상태 구조를 구성하고 논리를 업데이트하는 방법을 마스터하는 것입니다.

위 내용은 Redux State Management 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!