리액트 기반 어플리케이션 사용 시 redux와 reflux의 핵심 차이점은 무엇입니까?

리액트 기반 어플리케이션 사용 시 redux와 reflux의 핵심 차이점은 무엇입니까?

최근에 전자상거래 사이트 개발에 대한 예비 연구를 실시했는데, 리덕스와 환류 모두 Facebook의 플럭스 아키텍처에서 유래하고 있으며, 둘 다 인기가 있다는 것을 발견했습니다.나는 그 둘의 차이점에 대해 혼란스럽다.

전자상거래 웹 어플리케이션 개발 단계에서 가장 유연한 redux vs reflux는 언제 사용해야 합니까?

Flux, Reflux 및 Redux(및 기타 유사한 라이브러리)는 모두 횡단적인 데이터 관리를 처리하는 서로 다른 방법입니다.

Basic React 컴포넌트는 부모-자녀 관계에서는 정상적으로 동작하지만, 직접 연결되지 않은 앱의 다른 부분에서 데이터를 제공 및 업데이트해야 할 경우 빠르게 혼란스러워질 수 있습니다.이러한 라이브러리는 이러한 데이터를 유지 및 업데이트하기 위한 저장소와 작업(및 기타 메커니즘)을 제공합니다.

Flux는 (React와 마찬가지로) Facebook에 의해 개발된 독창적인 솔루션이며, 강력하지만 아마도 가장 쉽거나 읽기 쉽지는 않을 것이다.환류는 부분적으로 더 쉽고 명확하게 하기 위해 개발되었습니다.가장 큰 차이점은 Reflux의 모든 데이터 조각에는 자체 저장소와 작업이 있기 때문에 매우 읽기 쉽고 쓰기 쉽다는 것입니다.유감스럽게도 Reflux는 더 이상 적극적으로 개발되지 않고 있으며, 저자는 유지관리자를 찾고 있습니다.하지만 대체적으로 나는 Reflux가 플럭스의 보다 우아한 대안이라고 말하고 싶다.

Redux도 지금까지 가장 인기 있는 솔루션 중 하나입니다.이전/다음 기능을 쉽게 구현할 수 있고 스토어의 많은 부분에 영향을 미치는 횡단적인 액션을 수행할 수 있도록 네스트된 스토어에 불변의 콘텐츠를 제공하는 것이 장점입니다.리덕스의 단점은 플럭스나 리플렉스보다 상당히 장황하고 많은 개념을 가지고 있다는 것입니다.같은 기본 액션에서는 훨씬 더 많은 코드가 필요하며 비동기 구현이 가장 깔끔하지 않습니다.확실히 강력하고 확장성이 있습니다.

자세한 내용은 http://jamesknelson.com/which-flux-implementation-should-i-use-with-react/를 참조하십시오.

Reflux와 Redux의 구체적인 차이점을 중심으로 다시 답변을 쓰고 싶었습니다.@Mijamo는 왜 다른 것으로부터 유래했는지의 핵심에 들어가 있으며, 컨텍스트가 있다면 매우 좋은 요약이지만, 개발 관점에서 두 가지 차이점을 구체적으로 알기 위해 이 질문을 하게 되었습니다.그냥 들어가서 모든 걸 읽는 걸 보니 답을 쓰고 싶었어요.이 답변은 더 많은 코드 예시로 업데이트하겠습니다.

플럭스(빠른 개요)

다음으로 넘어가기 전에 염두에 두어야 할 것은 현재의 Flux와 관리해야 할 많은 컴포넌트 또는 다양한 상태의 어플리케이션 확장을 현재 어떻게 처리하고 있는지에 대한 것입니다.이는 React NYC: 문제를 해결하는 확장 플럭스(scaling flux)에서 매우 좋은 강연입니다.또한 Reflux와 Redux가 제공하는 솔루션과 크게 다르지 않습니다.요컨대 컴포넌트의 공유 상태를 모두 염두에 두어야 할 경우 어떻게 해야 합니까? 어떻게 대처하고 확장할 수 있을까요?"궁극적으로 이러한 프레임워크의 많은 부분이 도달하는 해답은 글로벌 국가라는 개념이 필요하다는 것입니다.필연적으로 두 프레임워크 모두 이를 위해 유사한 개념을 도입하고 있습니다.이 개념은 다음에 설명하겠습니다.

Flux 비교가 필요하기 때문에 아래 그림에서 Flux가 작동하는 방식을 간략하게 보여드리고 싶습니다.

환류

환류에는 디스패처가 없으며 View Components는 작업을 통해 구성요소를 통해 직접 통신합니다.

+---------+       +--------+       +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+       +--------+       +-----------------+
     ^                                      ¦
     +--------------------------------------+

플럭스와 차별화되는 점에서는 크게 다르지 않다.사용자는 여전히 자신의 작업을 만들고 자신의 스토어를 만들며 스토어에서 작업을 청취할 수 있습니다.가장 큰 차이점은 View 컴포넌트가 디스패처를 거치지 않고 직접 스토어에 액션을 제출하기 위해 컴포넌트는 스토어 속성을 가지고 있다는 것입니다.Reflux.ComponentReact.Component접속할 수 있는 를 、 이 、 예 예예 、

class MyComponent extends Reflux.Component
{
    constructor(props)
    {
        super(props);
        this.state = {}; // our store will add its own state to the component's
        this.store = StatusStore; // <- just assign the store class itself
    }

    render()
    {
        var flag = this.state.flag; // <- flag is mixed in from the StatusStore
        return <div>User is {flag}</div>
    }
}

복수의 점포에 수 능력도 (제가 에는, 「소품」이라고 하는 ).stores에는 편집 "Reflux"도 .mapStoreToState저장소의 상태를 구성요소로 전달하는 방법을 구체적으로 제어하려는 경우.

Reflux에 부속된 컴포넌트를 사용하고 있기 때문에 Reflux 컴포넌트에 대한 설명서와 이를 염두에 두고 컴포넌트를 올바르게 만드는 방법을 읽어보셔야 합니다.

마지막으로 제가 말씀드린 큰 문제는 글로벌 상태이며, 어떻게 대처해야 하는가에 대한 것입니다.환류에는 상점에서 ID를 설정하는 한 에 기여할 수 있는 가 있습니다.위의 링크는 훨씬 더 상세하게 표시되지만, 이 링크를 통해 액세스 할 수 있습니다.Reflux.GlobalState.[StoreID].[property]서 ''는StoreID와 """입니다.아이디 님이세요'property액세스 하고 싶은 실제 상태의 일부입니다.

리덕스

레독스는 그 자체로 많은 것을 변화시키고 디스패처라는 개념도 없앤다.자세히 살펴보기 전에 그들이 문서에서 언급한 세 가지 원칙을 강조하고 싶습니다.

1. 단일 정보원
2. 상태는 읽기 전용입니다.
3. 순수한 기능으로 변경

Redux에서는 어플리케이션의 글로벌 상태(큰 문제에 대처하는 것)는 1개뿐입니다.액션과 스토어가 아직 존재하더라도 스토어 자체는 글로벌스테이트 트리에서 자신의 상태를 추적하고 스테이트트리를 변경하는 액션을 디스패치하여 스테이트트리에 액세스 할 수 있도록 합니다. 수 .subscribe

이것의 큰 동기는 처음 두 가지 원칙에 있습니다.Flux 또는 심지어 Reflux에서 원하지 않는 상태(기술적으로는 언제든지 스토어에서 액세스하여 상태를 변경할 수 있기 때문에)를 변화시키는 것이 아무것도 없는지 확인하고 싶다면 Unflux와 같은 것에 의존해야 합니다.JS는 당신이 실수로 상태를 변화시키지 않았는지 확인합니다.한편, Redux는 스토어/셀렉터를 통해서만 상태에 액세스할 수 있도록 하며 디스패치액션(세 번째 원칙)을 통해서만 변경할 수 있도록 합니다.

주목해야 할 흥미로운 점은 Reflux와 Flux는 스토어에서 사용자가 듣고 어떤 상태변화를 해야 하는지 결정하는 액션이 있었지만, Redx의 스토어는 단순히 원하는 페이로드와 함께 메시지를 발송하고 그 후 스테이트 트리에서 무엇을 해야 하는지 결정하는 거대한 스위치 문을 통과합니다.이것이 그들이 말하는 것입니다.o 리듀서로 사용합니다.이것은 Flux가 가지고 있는 것과 다르지 않습니다.reduce스토어에는 있지만 Redux는 이 개념을 독자적인 것으로 해석하고 글로벌 스테이트 트리는 이 개념에 대응합니다.rootReducer됩니다(Redux 는 、 （ Redux ） 。combineReducers만들어 내다rootReducer)를 생각할 수 를 생각할 수 있는 좋은 방법은 변경을 자이언트 상태 트리에 디스패치하고 원하는 변경이 있으면 원하는 최종 상태로 축소 또는 압축하는 것입니다.이는 실제로 Redex가 많은 것을 설정하는 방법에 영향을 미치므로 React에 Rerender하는 방법을 알려줍니다(Redex with React를 사용하는 경우).

Redux의 데이터 흐름은 위에서 언급한 링크에서 매우 잘 언급되었지만, 제가 첨부한 인포그래픽도 있습니다.

그래서 핵심 차이점은

• Redux는 국가 관리에 대해 전혀 다른 접근방식을 가지고 있습니다.이는 글로벌한 상태가 존재하며, 변경을 하고 싶다면 반드시 그 상태(어떤 컴포넌트가 어떤 상태에 접근할 수 있는지에 대한 대처방법)에 따라 달라져야 한다는 생각을 수용합니다.
• Reflux는 컴포넌트가 원래 Flux를 크게 변경하지 않고 여러 스토어에 접속할 수 있도록 지원하려고 합니다(Reflux가 원래 Flux였어야 했다고 생각합니다).
• Reflux는 실제로 상태 트리의 관리 방식을 변경하고 저장소의 다양한 책임을 부여하며 상태 정보가 구성 요소에 매핑되는 방식을 변경합니다. 반면 Reflux는 구성 요소가 필요한 모든 저장소에 더 쉽게 액세스할 수 있도록 중간 사용자를 제거합니다.

바라건대, 이것이 그들 사이의 핵심 차이점을 더 잘 이해할 수 있게 해주길 바란다.

언급URL : https://stackoverflow.com/questions/36326210/what-is-the-core-difference-of-redux-reflux-in-using-react-based-application