Facebook Flux를 통해 Redux를 사용하는 이유는 무엇입니까? [닫은]

본인은했습니다 이 대답을 , 상용구를 줄이는 몇 GitHub의 예를 쳐다 보면서 조금이라도 (할 일 애플 리케이션) 돌아 오는 시도했다.

내가 아는 것처럼 공식 redux doc 동기 는 전통적인 MVC 아키텍처와 비교하여 전문가를 제공합니다. 그러나 질문에 대한 답변을 제공하지는 않습니다.

Facebook Flux를 통해 Redux를 사용해야하는 이유는 무엇입니까?

그것은 프로그래밍 스타일의 문제입니까? 기능적 기능과 비 기능적 기능입니까? 아니면 문제는 redux 접근법을 따르는 능력 / dev-tools에 있습니까? 아마 스케일링? 아니면 테스트?

redux가 기능적 언어에서 온 사람들에게 플럭스라고 말하면 맞습니까?

이 질문에 대답하기 위해 플럭스 대 redux에 대한 구현 redux의 동기 포인트의 복잡성을 비교할 수 있습니다.

공식 redux doc 동기 부여의 동기 부여 포인트는 다음과 같습니다 .

1. 낙관적 업데이트 처리 ( 내가 이해하는 것처럼 5 포인트에 거의 의존하지 않습니다. 페이스 북 플럭스로 구현하기가 어렵습니까? )
2. 서버에서의 렌더링 ( 페이스 북 플럭스도 가능합니다. redux와 비교하여 어떤 이점이 있습니까? )
3. 경로 전환을 수행하기 전에 데이터 가져 오기 ( 페이스 북 플럭스에서 달성 할 수없는 이유는 무엇입니까? )
4. 핫 리로드 ( React Hot Reload로 가능합니다 . 왜 redux가 필요한가요? )
5. 실행 취소 / 다시 실행 기능
6. 다른 점이 있습니까? 지속 상태처럼 ...

Redux 작가는 여기!

돌아 오는이 아닌 그 플럭스는 다른. 전반적으로 아키텍처는 동일하지만 Redux는 Flux가 콜백 등록을 사용하는 기능 구성을 사용하여 복잡성을 줄일 수 있습니다.

Redux에는 근본적인 차이가 없지만 Flux에서는 구현하기 어렵거나 불가능한 특정 추상화를 더 쉽게 구현하거나 구현하기가 가능하게 만듭니다.

감속기 구성

예를 들어 페이지 매김을 고려하십시오. 내 Flux + React Router 예제 는 페이지 매김을 처리하지만 그 코드는 끔찍합니다. 그것이 끔찍한 이유 중 하나는 Flux가 상점 전체에서 기능을 재사용하는 것이 부자연 스럽기 때문입니다. 두 개의 상점이 다른 조치에 대한 응답으로 페이지 매김을 처리해야하는 경우, 공통 기본 상점에서 상속하거나 (상속성을 사용할 때 특정 디자인에 자신을 고정하고 있음) 내부에서 외부 정의 함수를 호출해야합니다. Flux 스토어의 프라이빗 상태에서 어떻게 든 작동해야하는 이벤트 핸들러. 모든 것이 지저분합니다 (확실히 가능한 영역에 있지만).

반면에 Redux 페이지 매김은 감속기 구성 덕분에 자연 스럽습니다. 감속기가 완전히 내려가므로 페이지 매김 감속기를 생성 하는 감속기 팩토리를 작성한 다음 감속기 트리에서 사용할 수 있습니다 . Flux에서는 상점이 평평하지만 Redux에서는 React 구성 요소를 중첩 할 수있는 것처럼 기능 구성을 통해 감속기를 중첩 할 수 있기 때문에 그렇게 쉬운 이유는 열쇠 입니다.

이 패턴은 또한 비 사용자 코드 실행 취소 / 다시 실행 과 같은 훌륭한 기능을 가능하게 합니다. Undo / Redo를 Flux 앱에 두 줄의 코드로 연결하는 것을 상상할 수 있습니까? 거의. Redux를 사용하면 감소하는 컴포지션 패턴 덕분에 더욱 그렇습니다. Flux의 영향을받은 Elm Architecture 에서 개척되고 자세히 설명 된 패턴 입니다.

서버 렌더링

사람들은 Flux를 사용하여 서버에서 정상적으로 렌더링을 해왔지만, 각각 20 개의 Flux 라이브러리가 서버 렌더링을 "보다 쉽게"만들려고 시도하는 것을 보았을 것입니다. 사실 페이스 북은 서버 렌더링을 많이하지 않으므로 그에 대해 크게 신경 쓰지 않았으며 더 쉽게 만들기 위해 생태계에 의존합니다.

전통적인 Flux에서 상점은 싱글 톤입니다. 이것은 서버에서 다른 요청에 대한 데이터를 분리하기 어렵다는 것을 의미합니다. 불가능하지는 않지만 어렵다. 그렇기 때문에 대부분의 Flux 라이브러리 (및 새로운 Flux Utils )는 이제 싱글 톤 대신 클래스를 사용하도록 제안하므로 요청 당 상점을 인스턴스화 할 수 있습니다.

Flux에서 해결해야 할 다음과 같은 문제가 여전히 있습니다 (자체 또는 Flummox 또는 Alt 와 같은 자주 사용하는 Flux 라이브러리의 도움으로 ).

• 상점이 클래스 인 경우 요청에 따라 디스패처를 사용하여이를 작성하고 파기하는 방법 언제 상점을 등록합니까?
• 상점에서 데이터를 수화하고 나중에 클라이언트에서 다시 수화하는 방법은 무엇입니까? 이를 위해 특별한 방법을 구현해야합니까?

틀림없이 Flux 프레임 워크 (바닐라 플럭스가 아님)에는 이러한 문제에 대한 해결책이 있지만 지나치게 복잡합니다. 예를 들어, 실패하다 당신이 구현하도록 요구 serialize()하고 deserialize()당신의 상점에서 . Alt는 takeSnapshot()JSON 트리에서 상태를 자동으로 직렬화 하는 기능 을 제공하여 이러한 문제를 해결합니다 .

Redux는 더 나아갑니다. 다수의 감속기가 관리하는 단일 매장이 있기 때문에 (재) 수화를 관리하기 위해 특별한 API가 필요하지 않습니다. 상점을 "세척"하거나 "수화"할 필요는 없습니다. 단 하나의 상점 만 있으며 현재 상태를 읽거나 새로운 상태의 새 상점을 만들 수 있습니다. 각 요청은 별도의 상점 인스턴스를 얻습니다. Redux를 사용한 서버 렌더링에 대해 자세히 알아보십시오.

다시 말하지만, 이것은 Flux와 Redux에서 가능한 일이지만 Flux 라이브러리는 많은 API와 규칙을 도입 하여이 문제를 해결하며 Redux는 문제가 없기 때문에 해결할 필요조차 없습니다. 개념적 단순성 덕분에 1 위.

개발자 경험

나는 실제로 Redux가 인기있는 Flux 라이브러리가 될 의도는 없었습니다 . 시간 여행과 함께 핫 리로딩에 대한 ReactEurope 강의를 진행하면서 썼습니다 . 나는 한 가지 주요 목표를 가지고 있었다. 즉, 리듀서 코드를 즉석에서 변경하거나 심지어 행동을 건너 뛰어“과거를 변경”할 수있게하고 상태가 다시 계산되는 것을 볼 수있게한다.

나는 이것을 할 수있는 단일 Flux 라이브러리를 보지 못했습니다. 또한 React Hot Loader를 사용하면이 작업을 수행 할 수 없습니다. 실제로 Flux 스토어를 사용하여 수행 할 작업을 모르기 때문에 편집하면 중단됩니다.

Redux가 리듀서 코드를 다시로드해야 할 때이 코드를 호출 replaceReducer()하면 앱이 새 코드로 실행됩니다. Flux에서는 Flux 스토어에 데이터와 함수가 얽혀 있으므로 "기능 만 교체"할 수 없습니다. 또한 Dispatcher에 새 버전을 다시 등록해야합니다. Redux에는없는 것입니다.

생태계

Redux는 풍부하고 빠르게 성장하는 생태계를 가지고 있습니다. 미들웨어 와 같은 몇 가지 확장 점을 제공하기 때문 입니다. 로깅 , 약속 지원 , 관찰 가능 , 라우팅 , 불변성 개발 확인 , 지속성 등과 같은 사용 사례 를 염두에두고 설계되었습니다. 이 모든 것이 유용하지는 않지만, 쉽게 결합하여 함께 작동 할 수있는 일련의 도구에 액세스하는 것이 좋습니다.

간단

Redux는 Flux의 모든 이점 (작업 기록 및 재생, 단방향 데이터 흐름, 종속 돌연변이)을 유지하고 Dispatcher 및 상점 등록을 도입하지 않고도 새로운 이점 (쉬운 실행 취소, 다시로드, 핫 리로딩)을 추가합니다.

높은 수준의 추상화를 구현하는 동안 제정신을 유지하기 때문에 단순하게 유지하는 것이 중요합니다.

대부분의 Flux 라이브러리와 달리 Redux API 표면은 작습니다. 개발자 경고, 설명 및 위생 검사를 제거하면 99 줄 입니다. 디버깅 할 까다로운 비동기 코드는 없습니다.

실제로 읽고 Redux를 모두 이해할 수 있습니다.

Fluux와 비교하여 Redux 사용의 단점에 대한 내 대답을 참조하십시오 .

Quora에서는 누군가가 말합니다 .

우선 Flux없이 React를 사용하여 앱을 작성할 수 있습니다.

또한이 시각적 다이어그램 은 두 가지에 대한 빠른보기를 보여주기 위해 만들었습니다. 전체 설명을 읽고 싶지 않은 사람들에게는 빠른 대답 일 것입니다.

그러나 여전히 더 알고 싶다면 계속 읽으십시오.

나는 순수한 React로 시작한 다음 Redux와 Flux를 배워야한다고 생각합니다. React에 대한 REAL 경험이 있으면 Redux가 도움이되는지 여부를 알 수 있습니다.

아마도 Redux가 앱에 대한 것이라고 생각하고 Redux가 실제로 경험하지 않는 문제를 해결하려고한다는 것을 알게 될 것입니다.

Redux로 직접 시작하면 오버 엔지니어링 된 코드, 유지 보수가 더 어려운 코드, 훨씬 더 많은 버그 및 Redux가없는 코드로 끝날 수 있습니다.

에서 돌아 오는 워드 프로세서 :

동기 부여
JavaScript 단일 페이지 응용 프로그램의 요구 사항이 점점 복잡해지면서 코드는 그 어느 때보 다 많은 상태를 관리해야합니다. 이 상태에는 서버 응답 및 캐시 된 데이터뿐만 아니라 아직 서버에 유지되지 않은 로컬로 작성된 데이터가 포함될 수 있습니다. 활성 경로, 선택된 탭, 스피너, 페이지 매김 컨트롤 등을 관리해야하므로 UI ​​상태도 점점 복잡해지고 있습니다.

끊임없이 변화하는이 상태를 관리하는 것은 어렵습니다. 모델이 다른 모델을 업데이트 할 수 있으면 뷰가 모델을 업데이트하여 다른 모델을 업데이트하면 다른 뷰가 업데이트 될 수 있습니다. 어떤 시점에서 더 이상 언제, 왜, 어떻게 상태에 대한 제어권을 잃어 앱에서 어떤 일이 발생하는지 이해하지 못합니다. 시스템이 불투명하고 결정적이지 않은 경우 버그를 재현하거나 새로운 기능을 추가하기가 어렵습니다.

이것이 나쁘지 않은 것처럼 프런트 엔드 제품 개발에서 새로운 요구 사항이 일반화되는 것을 고려하십시오. 개발자는 낙관적 업데이트, 서버 측 렌더링, 경로 전환을 수행하기 전에 데이터 페치 등을 처리해야합니다. 우리는 이전에 다룰 필요가 없었던 복잡성을 관리하려고 노력하고 있으며 필연적으로 다음과 같은 질문을합니다. 대답은 '아니오.

인간이 생각하기 어려운 두 가지 개념, 즉 돌연변이와 비동기 성이 혼합되어 있기 때문에 이러한 복잡성을 다루기가 어렵습니다. 나는 그들을 멘토스와 콜라라고 부릅니다. 둘 다 분리하면 좋을 수 있지만 함께 엉망이됩니다. React와 같은 라이브러리는 비동기 및 직접 DOM 조작을 모두 제거하여 뷰 계층에서이 문제를 해결하려고합니다. 그러나 데이터 상태 관리는 사용자의 몫입니다. Redux가 들어온 곳입니다.

Flux, CQRS 및 Event Sourcing의 발자취를 따라 Redux는 업데이트가 언제 어떻게 발생할 수 있는지에 대한 특정 제한을 부과하여 상태 돌연변이를 예측 가능하게 만듭니다. 이러한 제한은 Redux의 세 가지 원칙에 반영됩니다.

또한 Redux 문서에서 :

핵심 개념
Redux 자체는 매우 간단합니다.

앱의 상태가 평범한 객체라고 설명한다고 상상해보십시오. 예를 들어, 할 일 앱의 상태는 다음과 같습니다.

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

이 객체는 세터가 없다는 점을 제외하고는 "모델"과 같습니다. 이것은 코드의 다른 부분이 상태를 임의로 변경할 수 없으므로 재현하기 어려운 버그를 유발합니다.

상태에서 무언가를 변경하려면 작업을 전달해야합니다. 액션은 무슨 일이 일어 났는지 설명하는 평범한 자바 스크립트 객체입니다. 다음은 몇 가지 동작 예입니다.

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

모든 변경 사항을 동작으로 설명하면 앱에서 진행되는 작업을 명확하게 이해할 수 있습니다. 무언가가 바뀌면 왜 바뀌 었는지 알 수 있습니다. 행동은 일어난 일의 빵 부스러기와 같습니다. 마지막으로 상태와 동작을 연결하기 위해 감속기라는 함수를 작성합니다. 다시 말하지만, 마법은 없습니다. 상태와 동작을 인수로 사용하여 앱의 다음 상태를 반환하는 함수일뿐입니다. 큰 앱에는 이러한 함수를 작성하기가 어려우므로 상태의 일부를 관리하는 작은 함수를 작성합니다.

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

그리고 해당 상태 키에 대해 두 개의 감속기를 호출하여 앱의 전체 상태를 관리하는 다른 감속기를 작성합니다.

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

이것은 기본적으로 Redux의 전체 아이디어입니다. Redux API는 사용하지 않았습니다. 이 패턴을 용이하게하는 몇 가지 유틸리티가 제공되지만, 주요 아이디어는 액션 객체에 대한 응답으로 상태가 시간이 지남에 따라 업데이트되는 방식을 설명하고 작성하는 코드의 90 %가 단순한 JavaScript이며 Redux를 사용하지 않는다는 것입니다 자체, API 또는 마술.

Dan Abramov가 Redux를 작성할 당시 플럭스의 다양한 구현과 트레이드 오프에 대해 논의하는이 게시물을 읽는 것이 가장 좋을 것 입니다. Flux 프레임 워크의 진화

둘째로, 당신이 연결 한 동기 부여 페이지는 Flux (및 반응)의 동기 부여만큼 Redux의 동기 부여를 실제로 논의하지 않습니다. 세 가지 원칙은 여전히 표준 플럭스 아키텍처에서 구현 차이를 처리하지 않습니다하지만 더 돌아 오는 고유의 것입니다.

기본적으로 Flux에는 구성 요소와의 UI / API 상호 작용에 대한 응답으로 상태 변경을 계산하고 이러한 변경 사항을 구성 요소가 구독 할 수있는 이벤트로 브로드 캐스트하는 여러 저장소가 있습니다. Redux에는 모든 구성 요소가 구독하는 저장소가 하나만 있습니다. IMO는 적어도 Redux가 데이터 흐름을 구성 요소로 다시 통합하여 데이터 흐름을 단순화하고 통합하는 것처럼 느낍니다 .Flux는 데이터 흐름의 다른 측면을 통합하는 데 집중합니다. 모델.

저는 얼리 어답터이며 Facebook Flux 라이브러리를 사용하여 중간 크기의 단일 페이지 응용 프로그램을 구현했습니다.

대화에 조금 늦었으므로, 나는 최선의 희망에도 불구하고 Facebook이 Flux 구현을 개념 증명으로 간주하는 것처럼 보이며 그것이받을만한 관심을받지 못했다는 것을 지적 할 것입니다.

교육적 인 Flux 아키텍처의 내부 작업을 더 많이 노출하지만 동시에 Redux와 같은 라이브러리가 제공하지 않는 많은 이점을 제공하지 않기 때문에 함께 사용하는 것이 좋습니다. 소규모 프로젝트에는 중요하지만 더 큰 프로젝트에는 매우 중요합니다.

우리는 앞으로 나아 가기 위해 Redux로 옮길 것이라고 결정했습니다.

다음은 Redux over Flux에 대한 간단한 설명입니다. Redux에는 디스패처가 없으며 리듀서라는 순수한 기능을 사용합니다. 디스패처가 필요하지 않습니다. 각 조치는 하나 이상의 리듀서에 의해 처리되어 단일 저장소를 업데이트합니다. 데이터는 변경할 수 없으므로 리듀서는 저장소를 업데이트하는 새로운 업데이트 된 상태를 반환합니다.

더 많은 정보 Flux vs Redux

Flux에서 꽤 오랫동안 일했고 지금은 Redux를 사용하여 꽤 오래했습니다. Dan이 지적했듯이 두 아키텍처는 그리 다르지 않습니다. 문제는 Redux가 일을 더 간단하고 깨끗하게 만듭니다. 플럭스 위에 몇 가지를 가르칩니다. 예를 들어 Flux는 단방향 데이터 흐름의 완벽한 예입니다. 데이터, 조작 및 뷰 레이어가 분리되어있는 부분을 분리합니다. Redux에서 우리는 같은 것을 가지고 있지만 불변성과 순수한 함수에 대해서도 배웁니다.

2018 년 중반 ExtJS에서 (몇 년 동안) 마이그레이션하는 새로운 반응 / redux 채택 자에서 :

redux 학습 곡선을 뒤로 밀고 난 후에도 같은 질문이 있었고 순수한 플럭스가 OP와 같이 더 간단하다고 생각했습니다.

위의 답변에서 언급했듯이 플럭스에 비해 redux의 이점을 곧 보았고 첫 번째 앱에서 작동했습니다.

다시 보일러 접시에 그립을 받고, 나는 몇 밖으로 시도하는 동안 다른 상태 관리 libs와, 내가 찾은 최고의이었다 재 대결 .

그것은이었다 훨씬 더 직관적 다음 바닐라 REDUX, 그것은 (I 도서관 일을해야한다고 생각 일), 나는 몇 엔터프라이즈 응용 프로그램을 얻을 수있었습니다을 내가 REDUX에 소비 된 시간의 75 % 밖으로 보일러 및 절단의 90 %를 인하 곧바로.

또한 동일한 redux 툴링으로 실행됩니다. 이 기사 는 몇 가지 이점을 다루는 좋은 기사 입니다.

따라서 "간단한 redux"를 검색하여이 SO 게시물에 도착한 다른 사람은 모든 장점과 1/4의 상용구를 사용하여 redux의 간단한 대안으로 시도해 보는 것이 좋습니다.

이 기사에 따르면 : https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

Redux가 아닌 더 나은 성능을 얻으려면 MobX를 사용하여 앱의 데이터를 관리하는 것이 좋습니다.