Redux는 단순히 글로벌 상태를 미화하지 않습니까?

Redux는 단순히 글로벌 상태를 미화하지 않습니까?

---

그래서 일주일 전에 React를 배우기 시작했고 필연적으로 상태 문제와 컴포넌트가 나머지 앱과 통신하는 방식에 대해 알게되었습니다. 나는 주위를 수색했고 Redux는 이달의 풍미 인 것 같다. 나는 모든 문서를 읽었고 실제로 꽤 혁신적인 아이디어라고 생각합니다. 그것에 대한 내 생각은 다음과 같습니다.

상태는 일반적으로 프로그래밍에서 매우 사악하고 버그의 큰 원인으로 동의됩니다. 앱 전체에 분산시키는 대신 Redux는 변경하기 위해 작업을 내 보내야하는 전역 상태 트리에 모든 것을 집중시키는 것이 어떨까요? 흥미 롭 네요. 모든 프로그램에는 상태가 필요하므로 하나의 불순한 공간에 고정하고 버그를 추적하기 쉽도록 내부에서만 수정하십시오. 그런 다음 개별 상태 조각을 React 구성 요소에 선언적으로 바인딩하고 자동으로 다시 그리면 모든 것이 아름답습니다.

그러나이 전체 디자인에 대해 두 가지 질문이 있습니다. 우선 상태 트리가 변경 불가능해야하는 이유는 무엇입니까? 시간 여행 디버깅, 핫 리로드에 신경 쓰지 않고 이미 내 앱에서 실행 취소 / 다시 실행을 구현했다고 가정 해 보겠습니다. 이 작업을 수행하는 것이 너무 번거로운 것 같습니다.

case COMPLETE_TODO:
  return [
    ...state.slice(0, action.index),
    Object.assign({}, state[action.index], {
      completed: true
    }),
    ...state.slice(action.index + 1)
  ];

대신 :

case COMPLETE_TODO:
  state[action.index].completed = true;

제가 배우기 위해 온라인 화이트 보드를 만들고 있으며 모든 상태 변경은 명령 목록에 브러시 스트로크를 추가하는 것만 큼 간단 할 수 있습니다. 잠시 후 (수백 번의 브러시 스트로크)이 전체 배열을 복제하면 비용과 시간이 많이 소요될 수 있습니다.

작업을 통해 변경되는 UI와는 독립적 인 전역 상태 트리는 괜찮지 만 실제로 변경 불가능해야합니까? 이와 같은 간단한 구현 (매우 대략적인 초안. 1 분 만에 작성 됨)의 문제점은 무엇입니까?

var store = { items: [] };

export function getState() {
  return store;
}

export function addTodo(text) {
  store.items.push({ "text": text, "completed", false});
}

export function completeTodo(index) {
  store.items[index].completed = true;
}

이것은 여전히 ​​생성 된 작업을 통해 변경된 전역 상태 트리이지만 매우 간단하고 효율적입니다.

---

Redux는 단순히 글로벌 상태를 미화하지 않습니까?

당연하지. 그러나 지금까지 사용한 모든 데이터베이스에 대해 동일하게 적용됩니다. Redux를 구성 요소가 반응 적으로 의존 할 수있는 인 메모리 데이터베이스로 취급하는 것이 좋습니다.

불변성은 하위 트리가 신원 확인까지 단순화되므로 매우 효율적으로 변경되었는지 확인할 수 있습니다.

예, 구현은 효율적이지만 트리가 어떻게 든 조작 될 때마다 전체 가상 돔을 다시 렌더링해야합니다.

React를 사용하는 경우 결국 실제 DOM과 비교하여 최소한의 배치 최적화 조작을 수행하지만 전체 하향식 다시 렌더링은 여전히 ​​비효율적입니다.

불변 트리의 경우 상태 비 저장 구성 요소는 종속 된 하위 트리가 이전 값과 비교하여 ID가 ​​다른지 확인하기 만하면됩니다. 그렇다면 렌더링을 완전히 피할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/33424157/isnt-redux-just-glorified-global-state