Redux vs Mobx : 프로젝트에 가장 적합한 것은 무엇입니까?

키 테이크 아웃

Redux와 Mobx는 모두 클라이언트 측 상태 관리를 제공하고 시간 여행 디버깅을 지원하며 React/React 기본 프레임 워크에 대한 광범위한 지원을 제공하는 오픈 소스 라이브러리입니다. 그러나 그들은 핵심 철학과 접근 방식이 다릅니다.

mobx는 배우고 사용하기 쉽고, 쓰기에 코드가 적고, 객체 지향 프로그래밍을 완벽하게 지원하며, 중첩 데이터를 쉽게 다루게합니다. 그러나 너무 많은 자유를 제공하여 인재 할 수없는 코드로 이어질 수 있으며, 디버그하기가 어렵고 앞으로 더 나은 대안이있을 수 있습니다. . Redux는 주 코드 작성에 대한 엄격한 지침으로 인해 크고 복잡한 프로젝트를 구축하는 데 더 인기 있고 적합하여 테스트를 쉽게 작성하고 관리 가능한 코드를 개발할 수 있습니다. 그러나 더 많은 보일러 플레이트 코드가 필요하며 소규모 프로젝트에 적합하지 않습니다.

Redux와 Mobx의 코드 비교는 Mobx의 코드 기반이 더 얇고 응용 프로그램을 더 빨리 구축하는 데 도움이 될 수 있음을 보여줍니다. 그러나 Mobx와 함께 가난하고 유지할 수없는 코드를 작성하는 것은 매우 쉽습니다.

Redux 또는 Mobx 사용 여부에 대한 결정은 현재 진행중인 프로젝트 유형과 귀하가 이용할 수있는 리소스에 따라 다릅니다.
• 많은 JavaScript 개발자의 경우 Redux에 대한 가장 큰 불만은 기능을 구현하는 데 필요한 보일러 플레이트 코드의 양입니다. 더 나은 대안은 유사한 기능을 제공하지만 쓸 수있는 코드가 적은 Mobx입니다. Mobx 초보자의 경우 Mobx의 제작자가 쓴이 소개를 간단히 살펴보십시오. 이 튜토리얼을 통해 실질적인 경험을 얻을 수 있습니다.
이 기사의 목표는 JavaScript 개발자가 프로젝트에 가장 적합한이 두 주 관리 솔루션 중 어느 것을 결정하도록 돕는 것입니다. 이 CRUD Redux 프로젝트를 Mobx로 마이그레이션 하여이 기사의 예제로 사용했습니다. 먼저 Mobx 사용의 장단점에 대해 논의한 다음 두 버전의 실제 코드 샘플을 시연하여 차이점을 보여줍니다.
• . 이 기사에서 언급 한 프로젝트에 대한 코드는 Github에서 찾을 수 있습니다 : .
Redux Crud 예제
• mobx crud 예
이 게시물을 즐기면 Sitepoint Premium에 가입하고 React 및 Redux를 사용하여 양식 작업에 대한 코스를 시청할 수도 있습니다.
Redux와 Mobx는 공통점이 무엇입니까? 먼저, 둘 다 공통점이 무엇인지 살펴 보겠습니다. 그들 : <.>
• 는 오픈 소스 라이브러리 입니다 클라이언트 측 국가 관리를 제공

Redux-Devtools-Extension을 통한 지원 시간 여행 디버깅 는 특정 프레임 워크에 묶여 있지 않습니다 는 React/React Native 프레임 워크에 대한 광범위한 지원을 제공합니다

4 가지 이유 mobx 이제 redux와 mobx의 주요 차이점을 살펴 보겠습니다.

1. 배우고 사용하기 쉬운 초보자의 경우 30 분만에 Mobx를 사용하는 방법을 배울 수 있습니다. 기본 사항을 배우면 바로 그게 다릅니다. 새로운 것을 배울 필요가 없습니다. Redux를 사용하면 기본 사항도 쉽습니다. 그러나 더 복잡한 응용 프로그램을 구축하기 시작하면 다음을 처리해야합니다.

redux-thunk 로 비동기 동작을 처리합니다 Redux-Saga 로 코드를 단순화합니다 계산 된 값 등을 처리하기 위해 선택기 정의 Mobx의 경우,이 모든 상황은“마법 적으로”처리됩니다. 그러한 상황을 처리하기 위해 추가 라이브러리가 필요하지 않습니다.

• 2. 를 쓰는 코드가 적습니다 Redux에서 기능을 구현하려면 최소 4 개의 아티팩트를 업데이트해야합니다. 여기에는 감속기, 동작, 컨테이너 및 구성 요소에 대한 코드 작성이 포함됩니다. 소규모 프로젝트를 진행하는 경우 특히 성가신 일입니다. Mobx는 최소 2 개의 아티팩트 (예 : 상점 및보기 구성 요소)를 업데이트하면됩니다.
3. 객체 지향 프로그래밍에 대한 완전한 지원
• 객체 지향 코드를 작성하는 것을 선호하는 경우 OOP를 사용하여 MOBX로 상태 관리 로직을 구현할 수 있다는 것을 알게되어 기쁩니다. @observable 및 @observer와 같은 데코레이터를 사용하여 평범한 JavaScript 구성 요소를 쉽게 만들 수 있으며 반응성을 저장할 수 있습니다. 기능 프로그래밍을 선호하는 경우 문제가 없습니다. 지원됩니다. 반면에 Redux는 기능적 프로그래밍 원칙에 따라 크게 준비되어 있습니다. 그러나 클래스 기반 접근 방식을 원한다면 Redux-Connect-Decorator 라이브러리를 사용할 수 있습니다.
4. 중첩 된 데이터를 처리하는 것은 쉬운
• 입니다 대부분의 JavaScript 응용 프로그램에서는 관계형 또는 중첩 데이터를 사용하여 작업 할 수 있습니다. Redux 상점에서 사용할 수 있으려면 먼저 정상화해야합니다. 다음으로 정규화 된 데이터에서 참조 추적을 관리하려면 더 많은 코드를 작성해야합니다. mobx에서는 데이터를 비정규 형식으로 저장하는 것이 좋습니다. Mobx는 귀하의 관계를 추적 할 수 있으며 자동으로 변경 사항을 다시 렌더링합니다. 도메인 객체를 사용하여 데이터를 저장하면 다른 상점에서 정의 된 다른 도메인 객체를 직접 참조 할 수 있습니다. 또한, 복잡한 데이터 문제를 쉽게 해결하기 위해 (@) 컴퓨터 데코레이터 및 수정자를 사용할 수 있습니다. mobx를 사용하지 않는 3 가지 이유

1. 너무 많은 자유

Redux는 상태 코드 작성 방법에 대한 엄격한 지침을 제공하는 프레임 워크입니다. 즉, 테스트를 쉽게 작성하고 유지 관리 가능한 코드를 개발할 수 있습니다. Mobx는 도서관이며이를 구현하는 방법에 대한 규칙이 없습니다. 이에 대한 위험은 바로 가기를 가져 와서 빠른 수정 사항을 적용하는 것이 매우 쉽다는 것입니다.

2. 디버그하기 어렵습니다 mobx의 내부 코드 "마술처럼"는 응용 프로그램을 반응하기 위해 많은 논리를 처리합니다. 매장과 구성 요소 사이에 데이터가 전달되는 보이지 않는 영역이 있으므로 문제가 발생하면 디버깅하기가 어렵습니다. @Actions를 사용하지 않고 구성 요소에서 상태를 직접 변경하면 버그 소스를 찾아내는 데 어려움이 있습니다.

3. mobx

에 대한 더 나은 대안이있을 수 있습니다 소프트웨어 개발에서 새로운 신흥 트렌드가 항상 나타납니다. 몇 년 안에 현재 소프트웨어 기술은 빠르게 운동량을 풀 수 있습니다. 현재 Redux 및 Mobx와 경쟁하는 몇 가지 솔루션이 있습니다. 몇 가지 예는 Relay/Apollo & GraphQL, Alt.js 및 Jumpsuit입니다. 이러한 기술 중 하나는 가장 인기가 높아질 가능성이 있습니다. 어떤 것이 당신에게 가장 적합한 지 알고 싶다면 모두 시도해야합니다.

<:> 코드 비교 : redux vs mobx

충분한 이론, 코드를 살펴 보겠습니다. 먼저 각 버전이 부트 스트랩을하는 방식을 비교합니다 부트 스트랩 <: :> redux 버전 : Redux에서는 먼저 상점을 정의한 다음 제공 업체를 통해 앱으로 전달합니다. 또한 비동기 기능을 처리하려면 Redux-Thunk 및 Redux-Promise-Middleware를 정의해야합니다. Redux-Devtools-Extension을 사용하면 시간 여행 모드에서 매장을 디버깅 할 수 있습니다.

<: :> mobx 버전 : Mobx에서는 여러 매장을 설정해야합니다. 이 경우 AllStores라는 컬렉션에 배치 한 상점 하나만 사용하고 있습니다. 그런 다음 제공자는 매장 컬렉션을 앱으로 전달하는 데 사용됩니다.

앞에서 언급했듯이 Mobx는 비동기 동작을 처리하기 위해 외부 라이브러리가 필요하지 않으므로 줄이 적습니다. 그러나 Redux-Devtools-Extension 디버깅 도구에 연결하려면 Mobx-remotedev가 필요합니다.

여기서 코드의 양은 두 버전에서 거의 동일합니다. Mobx는 수입 명세서가 적습니다 <ection> 소품 주입 <: :> redux 버전 : Redux에서는 React-Redux의 Connect () 함수를 사용하여 상태와 동작이 소품으로 전달됩니다. <h2> <: :> mobx 버전 : Mobx에서는 단순히 매장 컬렉션을 주입합니다. 컨테이너 또는 구성 요소 클래스의 @inject를 사용하여이를 수행합니다. 이를 통해 상점을 소품으로 제공하여 특정 매장에 액세스하여 자식 구성 요소에 전달할 수 있습니다. 상태와 작업은 모두 상점 객체의 속성을 통해 액세스하므로 Redux의 경우와 마찬가지로 별도로 전달할 필요가 없습니다. </:> </h2> <version> mobx 버전은 읽기 쉬운 것 같습니다. 그러나 Redux-Connect-Decorators를 사용하여 Redux 코드를 단순화 할 수 있습니다. 이 경우 명확한 승자는 없습니다 <es> 상점, 동작 및 감속기 정의 <article>이 기사를 기울여 주려면 한 가지 조치에 대한 코드 샘플을 보여 드리겠습니다. <: :> redux 버전 : Redux에서는 동작 및 감속기를 정의해야합니다<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;// src/store.js &lt;/span&gt;&lt;span&gt;import &lt;span&gt;{ applyMiddleware, createStore }&lt;/span&gt; from &quot;redux&quot;; &lt;/span&gt;&lt;span&gt;import thunk from &quot;redux-thunk&quot;; &lt;/span&gt;&lt;span&gt;import promise from &quot;redux-promise-middleware&quot;; &lt;/span&gt;&lt;span&gt;import &lt;span&gt;{ composeWithDevTools }&lt;/span&gt; from 'redux-devtools-extension'; &lt;/span&gt;&lt;span&gt;import rootReducer from &quot;./reducers&quot;; &lt;/span&gt; &lt;span&gt;const middleware = composeWithDevTools(applyMiddleware(promise(), thunk)); &lt;/span&gt; &lt;span&gt;export default createStore(rootReducer, middleware); &lt;/span&gt; &lt;span&gt;------------------------------------------------------------------------------- &lt;/span&gt; &lt;span&gt;// src/index.js &lt;/span&gt;… &lt;span&gt;ReactDOM.render( &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;BrowserRouter&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;Provider&lt;/span&gt; store&lt;span&gt;={store}&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;App&lt;/span&gt; /&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;/Provider&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;/BrowserRouter&lt;/span&gt;&gt;&lt;/span&gt;, &lt;/span&gt; &lt;span&gt;document.getElementById('root') &lt;/span&gt;&lt;span&gt;); &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <: :> mobx 버전 : Mobx에서는 동작 및 감속기에 대한 논리가 한 클래스에서 수행됩니다. 응답을받은 후 다른 행동 엔티티를 부르는 비동기 조치를 정의했습니다. Mobx는 OOP 스타일을 사용하기 때문에 여기에 정의 된 상점 클래스는 클래스 생성자를 사용하여 여러 매장을 쉽게 생성 할 수 있도록 리팩토링되었습니다. 따라서 여기에 설명 된 코드는 특정 도메인 저장소와 관련이없는 기본 코드입니다. <p> <not> 믿거 나 말거나, 두 버전 모두에 정의 된 논리는 동일한 작업을 수행합니다. </not></p> <i> UI 로딩 상태를 업데이트하십시오 <as as> 데이터를 비동기 적으로 비동기로 가져옵니다 <tions> 예외 및 업데이트 상태를 포착합니다 <p> Redux에서는 33 줄의 코드를 사용했습니다. Mobx에서는 동일한 결과를 얻기 위해 약 14 줄의 코드를 사용했습니다! MOBX 버전의 주요 이점은 수정이 거의 없거나 전혀없는 거의 모든 도메인 스토어 클래스에서 기본 코드를 재사용 할 수 있다는 것입니다. 즉, 응용 프로그램을 더 빨리 구축 할 수 있습니다 기타 차이 </p> <s> Redux에서 양식을 만들기 위해 Redux-Form을 사용했습니다. Mobx에서는 Mobx-React-Form을 사용했습니다. 두 라이브러리 모두 성숙하고 양식 논리를 쉽게 처리하는 데 도움이됩니다. 개인적으로, 나는 플러그인을 통해 필드를 검증 할 수 있기 때문에 Mobx-React-Form을 선호합니다. Redux-Form을 사용하면 자신의 유효성 검사 코드를 작성하거나 유효성 검사 패키지를 가져와 유효성 검사를 처리 할 수 ​​있습니다. <down> MOBX의 작은 단점 중 하나는 관찰 가능한 객체의 특정 기능에 직접 액세스 할 수 없다는 것입니다. 운 좋게도 관찰 가능한 객체를 일반 자바 스크립트 개체로 변환하는 데 사용할 수있는 tojs () 함수를 제공했습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;// src/stores/index.js &lt;/span&gt;&lt;span&gt;import remotedev from 'mobx-remotedev'; &lt;/span&gt;&lt;span&gt;import &lt;span&gt;Store&lt;/span&gt; from './store'; &lt;/span&gt; &lt;span&gt;const contactConfig = { &lt;/span&gt; &lt;span&gt;name:'Contact Store', &lt;/span&gt; &lt;span&gt;global: true, &lt;/span&gt; &lt;span&gt;onlyActions:true, &lt;/span&gt; &lt;span&gt;filters: { &lt;/span&gt; &lt;span&gt;whitelist: &lt;span&gt;/fetch&lt;span&gt;|update|create|Event|entity|entities|handleErrors&lt;/span&gt;/&lt;/span&gt; &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;}; &lt;/span&gt; &lt;span&gt;const contactStore = new Store('api/contacts'); &lt;/span&gt; &lt;span&gt;const allStores = { &lt;/span&gt; &lt;span&gt;contactStore: remotedev(contactStore, contactConfig) &lt;/span&gt;&lt;span&gt;}; &lt;/span&gt; &lt;span&gt;export default allStores; &lt;/span&gt; &lt;span&gt;------------------------------------------------------------------------------- &lt;/span&gt; &lt;span&gt;// src/index.js &lt;/span&gt;… &lt;span&gt;ReactDOM.render( &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;BrowserRouter&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;Provider&lt;/span&gt; stores&lt;span&gt;={allStores}&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;App&lt;/span&gt; /&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;/Provider&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt; &lt;span&gt;&lt;span&gt;&lt;/BrowserRouter&lt;/span&gt;&gt;&lt;/span&gt;, &lt;/span&gt; &lt;span&gt;document.getElementById('root') &lt;/span&gt;&lt;span&gt;); &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> 결론 <can> 분명히, 당신은 Mobx의 코드 기반이 훨씬 더 희박하다는 것을 알 수 있습니다. OOP 스타일과 좋은 개발 관행을 사용하면 응용 프로그램을 신속하게 구축 할 수 있습니다. 주요 단점은 가난하고 인재 할 수없는 코드를 작성하는 것이 매우 쉽다는 것입니다. <p> 반면 <on> Redux는 대규모 및 복잡한 프로젝트를 구축하는 데 더 인기가 있으며 적합합니다. 모든 개발자가 테스트하고 유지 관리하기 쉬운 코드를 작성하도록 보호 조작이있는 엄격한 프레임 워크입니다. 그러나 소규모 프로젝트에 적합하지 않습니다 Mobx의 단점에도 불구하고 모범 사례를 준수하면 여전히 큰 프로젝트를 구축 할 수 있습니다. Albert Einstein의 말에 따르면,“가능한 한 간단하지만 단순하지는 않지만”. </on></p> <provided> 나는 mobx로 마이그레이션 할 것인지 Redux를 고수할지 여부를 명확한 사례를 만들기 위해 충분한 정보를 제공하기를 바랍니다. 궁극적으로 결정은 현재 진행중인 프로젝트 유형과 귀하가 이용할 수있는 리소스에 따라 다릅니다.<!-- If you need any clarifications on the MobX example code, feel free to ask questions in the comments below. Have I convinced you to give MobX a shot in your next React project? --> 플레이어로드… <questions> Redux vs Mobx <h2>에서 자주 묻는 질문 (FAQ) <key> redux와 mobx의 주요 차이점은 무엇입니까? </key> </h2> Redux와 Mobx는 주정부 관리 라이브러리이지만 핵심 철학과 접근 방식이 다릅니다. Redux는 플럭스 아키텍처를 기반으로 엄격하고 예측 가능한 상태 관리 패턴을 따릅니다. 단일 스토어가 있으며 상태 변경은 작업 및 감속기를 통해 이루어집니다. 반면에 Mobx는보다 유연하고 직관적 인 접근 방식을 채택합니다. 그것은 여러 매장과 상태 변경이 작업을 통해 직접 이루어집니다. <h3> </h3> 대규모 응용 프로그램의 경우 redux 또는 mobx가 더 좋습니까? <p> Redux는 종종 예측 가능 및 대규모 응용 프로그램에 선호됩니다. 투명한 국가 관리. 행동 및 감속기의 엄격한 패턴을 사용하면 상태 변경을보다 쉽게 ​​추적 할 수 있으며 이는 복잡한 응용 분야에서 중요 할 수 있습니다. 그러나보다 유연한 접근 방식을 갖춘 MOBX는 대규모 응용 프로그램에서 효과적으로 사용할 수 있습니다. 특히 개발자가 덜 보일러 플레이트와보다 간단한 코딩 스타일을 선호 할 때 학습 곡선이 redux와 mobx를 어떻게 비교 하는가? ? </p> <h3> </h3> Redux는 Mobx에 비해 가파른 학습 곡선을 가지고 있습니다. 행동, 감속기 및 상점의 개념과 서로 상호 작용하는 방법을 이해해야합니다. 반면에 Mobx는 일반적으로 관측 가능 및 동작과 같은 더 친숙한 프로그래밍 개념을 사용하므로 보일러 플레이트 코드가 적기 때문에 파악하기가 더 쉽습니다. <p> Redux는 Mobx에 비해 비동기 동작을 어떻게 처리합니까? </p> <middle> redux에는 비동기 동작을 처리하기 위해 Redux-Thunk 또는 Redux-Saga와 같은 미들웨어가 필요합니다. 이 미들웨어는 작업을 통해 다른 작업을 파견하거나 동작의 발송을 지연시킬 수 있습니다. 반면에 Mobx는 추가 미들웨어가 필요하지 않고 직접 비동기 동작을 처리 할 수 ​​있습니다. <h3> Redux와 Mobx는 단일 응용 프로그램에서 함께 사용할 수 있습니까? </h3> 예, Redux와 Mobx는 될 수 있습니다. 단일 응용 프로그램에서 함께 사용됩니다. 그러나 이것은 불필요한 복잡성으로 이어질 수 있으므로 일반적으로 수행되지 않습니다. 프로젝트의 특정 요구와 제약을 기반으로 하나 또는 다른 하나를 선택하는 것이 일반적으로 권장됩니다. <p> 테스트가 redux와 mobx와 비교하는 방법? </p> <h3> Redux는 어떻게 분명한 이점을 가지고 있습니다. 테스트. 예측 가능한 상태 변경 및 순수한 기능 (감속기)을 사용하면 쉽게 테스트 할 수 있습니다. Mobx는 더 역동적 인 특성으로 인해 테스트하기에 간단하지는 않지만 Jest와 같은 도구를 사용하여 효과적으로 테스트 할 수 있습니다.<compare> redux와 mobx와 mobx의 성능을 어떻게 비교 하는가? <h3> </h3> redux와 mobx는 성능 특성이 우수하며 큰 상태 트리를 효율적으로 처리 할 수 ​​있습니다. 그러나 MOBX는 세분화 된 관찰 가능성 시스템으로 인해 특정 시나리오에서 우위를 점할 수 있으며, 이는 국가 변화에 의해 직접 영향을받는 구성 요소 만 업데이트합니다. <p> 커뮤니티 지원과 생태계는 Redux와 Mobx를 어떻게 비교합니까? ? </p> <h3> Redux는 Mobx에 비해 더 큰 커뮤니티와 더 성숙한 생태계를 가지고 있습니다. Redux 학습에 사용할 수있는 더 많은 리소스와 함께 작동하도록 설계된 타사 라이브러리가 더 많습니다. 그러나 Mobx는 인기를 얻고 커뮤니티가 성장하고 있습니다. </h3> <p> Mobx가 Redux보다 더 나은 선택이 될 수있는 일부 사용 사례는 무엇입니까? </p> <h3> Mobx는 개발자가있는 프로젝트에 더 나은 선택이 될 수 있습니다. 보다 간단하고 덜 보일러 플레이트 코딩 스타일을 선호하거나 프로젝트가 상태 업데이트에 대한 세밀한 제어가 필요한 경우를 선호합니다. Mobx가 이러한 것들을 크게 활용하기 때문에 팀이 객체 지향 프로그래밍 개념에 더 편한 경우에도 좋은 선택입니다. </h3> <p> Redux가 Mobx보다 더 나은 선택이 될 수있는 일부 사용 사례는 무엇입니까? </p> <h3> 상태 변경의 예측 가능성과 투명성이 중요한 대규모 응용 프로그램의 경우 Redux가 더 나은 선택 일 수 있습니다. Redux가이를 활용하기 때문에 팀이 기능 프로그래밍 개념에 익숙해지면 좋은 선택입니다. 또한 Redux의 성숙한 생태계와 대규모 커뮤니티는 결정적인 요소가 될 수 있습니다. </h3></compare> </h3></middle></questions></provided></can></down></s></tions></as></i></:></:></article></es></version></:></ection>

위 내용은 Redux vs Mobx : 프로젝트에 가장 적합한 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!