ホームページ >ウェブフロントエンド >jsチュートリアル >Redux vs Mobx：あなたのプロジェクトに最適なのはどれですか？

Redux vs Mobx：あなたのプロジェクトに最適なのはどれですか？

William Shakespeareオリジナル: 2025-02-16 09:40:10823ブラウズ

キーテイクアウト

ReduxとMobxの両方は、クライアント側の状態管理を提供し、時間旅行のデバッグをサポートし、React/Reactネイティブフレームワークを広範囲にサポートするオープンソースライブラリです。しかし、それらは彼らの核となる哲学とアプローチが異なります
Reduxは、州のコードライティングに関する厳格なガイドラインにより、テストを簡単に作成し、メンテナンス可能なコードを開発できるため、大規模で複雑なプロジェクトを構築するのに人気が高く、適しています。ただし、より多くのボイラープレートコードが必要であり、小規模プロジェクトには適していません。
ReduxまたはMobxを使用するかどうかの決定は、取り組んでいるプロジェクトの種類と、利用可能なリソースに依存します。
Mobxの初心者については、Mobxの作成者によって書かれたこの紹介を簡単に見てください。また、このチュートリアルを使用して、実践的な経験を積むこともできます。
この記事に記載されているプロジェクトのコードは、githubで見つけることができます。

Redux crudの例

mobx crudの例

この投稿を楽しんでいる場合は、SitePoint Premiumにサインアップして、ReactとReduxを使用してフォームの作業に関するコースをご覧ください。

ReduxとMobxの共通点は何ですか？

最初に、彼らが共通しているものを見てみましょう。彼ら：

です

クライアント側の状態管理を提供

Redux-Devtools-Extensionを介したタイムトラベルのデバッグ Redux vs Mobx：あなたのプロジェクトに最適なのはどれですか？をサポートします

特定のフレームワークに結び付けられていません

反応/反応ネイティブフレームワークを広範囲にサポートしています。

1。学習して使用しやすい

初心者の場合、わずか30分でmobxを使用する方法を学ぶことができます。基本を学んだら、それだけです。新しいことを学ぶ必要はありません。 Reduxでは、基本も簡単です。ただし、より複雑なアプリケーションの構築を開始したら、次のように対処する必要があります。
- を使用した非同期アクションの処理
- 計算された値などを処理するためにセレクターを定義します
- mobxを使用すると、これらの状況はすべて「魔法のように」世話をします。このような状況を処理するために追加のライブラリは必要ありません
reduxに機能を実装するには、少なくとも4つのアーティファクトを更新する必要があります。これには、還元剤、アクション、コンテナ、コンポーネントのコードの作成が含まれます。小さなプロジェクトに取り組んでいる場合、これは特に迷惑です。 mobxは、少なくとも2つのアーティファクト（つまり、ストアとビューコンポーネント）を更新する必要があります。
3。オブジェクト指向プログラミングの完全なサポート

オブジェクト指向のコードを作成することを好む場合は、OOPを使用してMOBXを使用して状態管理ロジックを実装できることを知って喜んでいます。 @observableや@observerなどのデコレーターを使用することで、簡単にJavaScriptコンポーネントとストアをリアクティブにすることができます。機能的なプログラミングを好む場合は、問題ありません。これもサポートされています。一方、Reduxは、機能的なプログラミングの原則を重視しています。ただし、クラスベースのアプローチが必要な場合は、Redux-Connect-Decoratorライブラリを使用できます。
4。ネストされたデータを処理するのは簡単です

ほとんどのJavaScriptアプリケーションでは、リレーショナルまたはネストされたデータを使用していることがわかります。 Reduxストアで使用できるようにするには、最初に正規化する必要があります。次に、正規化されたデータで参照の追跡を管理するために、さらにコードを記述する必要があります。
mobxでは、データを非正規化された形式に保存することをお勧めします。 Mobxはあなたの関係を追跡することができ、変更を自動的に再レンダリングします。ドメインオブジェクトを使用してデータを保存することにより、他のストアで定義されている他のドメインオブジェクトを直接参照できます。さらに、複雑なデータの課題を簡単に解決するために、観測可能性に（@）計算されたデコレータと修飾子を使用できます。
3 Mobx
を使用しない理由
1。自由が多すぎます

Reduxは、状態コードの書き方に関する厳格なガイドラインを提供するフレームワークです。これは、テストを簡単に書き込み、保守可能なコードを開発できることを意味します。 Mobxはライブラリであり、それを実装する方法に関するルールはありません。これの危険性は、ショートカットを取り、維持不可能なコードにつながる可能性のあるクイックフィックスを適用するのが非常に簡単であることです。

2。デバッグが難しい

mobxの内部コードは、「魔法のように」多くのロジックを処理して、アプリケーションをリアクティブにします。データがストアとコンポーネントの間を通過する目に見えない領域があり、問題が発生したときにデバッグを困難にします。 @Actionsを使用せずにコンポーネントで状態を直接変更すると、バグのソースを特定するのに苦労するでしょう。
3。 mobx
のより良い代替手段がある可能性がありますソフトウェア開発では、新しい新興のトレンドが常に登場します。数年以内に、現在のソフトウェア技術はすぐに勢いを失う可能性があります。現時点では、ReduxとMobxの両方と競合するいくつかのソリューションがあります。いくつかの例は、リレー/アポロ＆グラフクル、alt.js、ジャンプスーツです。これらのテクノロジーのいずれかは、最も人気のあるものになる可能性があります。どれが自分に最適かを本当に知りたい場合は、それらすべてを試す必要があります。
コードの比較：Redux vs Mobx

十分な理論、コードを見てみましょう。まず、各バージョンがブートストラップの方法を比較します
ブートストラップ

Reduxバージョン： Reduxでは、最初にストアを定義し、次にプロバイダーを介してアプリに渡します。また、非同期機能を処理するには、Redux-ThunkおよびRedux-Promise-Middlewareを定義する必要があります。 Redux-Devtools-Extensionを使用すると、タイムトラベルモードでストアをデバッグできます。

mobxバージョン： MOBXでは、複数のストアをセットアップする必要があります。この場合、私は1つの店のみを使用しています。これをAllstoresというコレクションに配置しました。その後、プロバイダーを使用して、ストアコレクションをアプリに渡すために使用されます。前述のように、Mobxは非同期アクションを処理するために外部ライブラリを必要としないため、行が少なくなります。ただし、Redux-Devtools-Extensionデバッグツールに接続するには、Mobx-Remotedevが必要です。

ここでのコードの量は、両方のバージョンでほぼ同じです。ただし、Mobxの輸入明細書は少なくなっています
props indection
```
// src/store.js
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from "./reducers";

const middleware = composeWithDevTools(applyMiddleware(promise(), thunk));

export default createStore(rootReducer, middleware);

-------------------------------------------------------------------------------

// src/index.js
…
ReactDOM.render(
 <BrowserRouter>
 <Provider store={store}>
 <App />
 </Provider>
 </BrowserRouter>,
 document.getElementById('root')
);

```
Reduxバージョン： Reduxでは、React-ReduxのConnect（）関数を使用して、状態とアクションがプロップに渡されます。

mobxバージョン： MOBXでは、Storesコレクションを注入するだけです。これを行うには、コンテナクラスまたはコンポーネントクラスの上部に@Injectを使用します。これにより、小道具で店舗を利用できるようになり、特定の店にアクセスして子供のコンポーネントに渡すことができます。状態とアクションの両方にストアオブジェクトのプロパティを介してアクセスされるため、Reduxの場合と同様に個別に渡す必要はありません。
```
// src/stores/index.js
import remotedev from 'mobx-remotedev';
import Store from './store';

const contactConfig = {
 name:'Contact Store',
 global: true,
 onlyActions:true,
 filters: {
 whitelist: /fetch|update|create|Event|entity|entities|handleErrors/
 }
};

const contactStore = new Store('api/contacts');

const allStores = {
 contactStore: remotedev(contactStore, contactConfig)
};

export default allStores;

-------------------------------------------------------------------------------

// src/index.js
…
ReactDOM.render(
 <BrowserRouter>
 <Provider stores={allStores}>
 <App />
 </Provider>
 </BrowserRouter>,
 document.getElementById('root')
);

```
mobxバージョンの読み取りが簡単なようです。ただし、Redux-Connect-Decoratorsを使用してReduxコードを簡素化できます。その場合、明確な勝者はいません。

ストア、アクション、および還元剤の定義
この記事を無駄のないままにするために、1つのアクションのコードサンプルを紹介します。
Reduxバージョン： Reduxでは、アクションと還元剤を定義する必要があります
```
// src/store.js
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from "./reducers";

const middleware = composeWithDevTools(applyMiddleware(promise(), thunk));

export default createStore(rootReducer, middleware);

-------------------------------------------------------------------------------

// src/index.js
…
ReactDOM.render(
 <BrowserRouter>
 <Provider store={store}>
 <App />
 </Provider>
 </BrowserRouter>,
 document.getElementById('root')
);

```
mobxバージョン： MOBXでは、アクションのロジックと還元剤が1つのクラスで行われます。応答が受信された後に別のアクションエンティティが取得されたと呼ばれる非同期アクションを定義しました。
MobxはOOPスタイルを使用しているため、ここで定義されているストアクラスがリファクタリングされ、クラスコンストラクターを使用して複数のストアを簡単に作成できるようになりました。したがって、ここに示されているコードは、特定のドメインストアに結び付けられていない基本コードです。

信じられないかもしれませんが、両方のバージョンで定義されているロジックは同じタスクを実行します。
```
// src/stores/index.js
import remotedev from 'mobx-remotedev';
import Store from './store';

const contactConfig = {
 name:'Contact Store',
 global: true,
 onlyActions:true,
 filters: {
 whitelist: /fetch|update|create|Event|entity|entities|handleErrors/
 }
};

const contactStore = new Store('api/contacts');

const allStores = {
 contactStore: remotedev(contactStore, contactConfig)
};

export default allStores;

-------------------------------------------------------------------------------

// src/index.js
…
ReactDOM.render(
 <BrowserRouter>
 <Provider stores={allStores}>
 <App />
 </Provider>
 </BrowserRouter>,
 document.getElementById('root')
);

```
UIロード状態を更新します
- reduxでは、33行のコードを使用しました。 MOBXでは、同じ結果を達成するために約14行のコードを使用しました！ MOBXバージョンの主な利点は、ほとんどまたはまったく変更されていないほぼすべてのドメインストアクラスで基本コードを再利用できることです。つまり、アプリケーションをより速く構築できることを意味します。
その他の違い

reduxでフォームを作成するには、Redux-formを使用しました。 Mobxでは、Mobx-React-Formを使用しました。両方のライブラリは成熟しており、フォームロジックを簡単に処理するのに役立ちます。個人的には、プラグインを介してフィールドを検証できるため、mobx反応形式を好みます。 Redux-formを使用すると、独自の検証コードを作成するか、検証パッケージをインポートして検証を処理できます。
Mobxを使用した小さな欠点は、観察可能なオブジェクトで特定の関数に直接アクセスできないことです。それらは実際には単純なJavaScriptオブジェクトではないためです。幸いなことに、彼らは、観測可能なオブジェクトを単純なJavaScriptオブジェクトに変換するために使用できる関数tojs（）を提供しました。
結論

明らかに、Mobxのコードベースがはるかにleanせていることがわかります。 OOPスタイルと優れた開発プラクティスを使用して、アプリケーションを迅速に構築できます。主な欠点は、貧弱で維持不可能なコードを書くのが非常に簡単であることです。
一方、
Reduxはより人気があり、大規模で複雑なプロジェクトを構築するのに適しています。これは、すべての開発者がテストしてメンテナンスしやすいコードを書くことを保証するセーフガードを備えた厳格なフレームワークです。ただし、小規模プロジェクトにはあまり適していません。

Mobxの欠点にもかかわらず、良い慣行に従うと、大規模なプロジェクトを構築できます。アルバート・アインシュタインの言葉では、「すべてを可能な限りシンプルにしますが、よりシンプルではありません」。
Mobxに移行するかReduxに固執するかどうかにかかわらず、明確なケースを作成するのに十分な情報を提供してくれることを願っています。最終的に、決定は、作業中のプロジェクトの種類と、利用可能なリソースに依存します。プレーヤーをロードする…

redux vs mobx
に関するよくある質問（FAQ）
ReduxとMobxの重要な違いは何ですか？
ReduxとMobxはどちらも州の管理ライブラリですが、それらは核となる哲学とアプローチが異なります。 Reduxは、フラックスアーキテクチャに基づいて、厳格で予測可能な状態管理パターンに従います。単一のストアがあり、状態の変更はアクションと還元剤を通じて行われます。一方、MOBXは、より柔軟で直感的なアプローチを採用しています。複数の店舗と州の変更がアクションを通じて直接行われます。透明な国家管理。アクションと還元剤の厳格なパターンにより、状態の変更を簡単に追跡できます。これは、複雑なアプリケーションで重要な場合があります。ただし、より柔軟なアプローチを備えたMOBXは、特に開発者がより少ないボイラープレートとより簡単なコーディングスタイルを好む場合、大規模なアプリケーションでも効果的に使用できます。？
reduxは、mobxと比較してより急な学習曲線を持っています。アクション、リデューサー、ストアの概念、およびそれらが互いにどのように相互作用するかを理解する必要があります。一方、MOBXは一般に、観測可能性やアクションなどのより馴染みのあるプログラミングの概念を使用しているため、一般的に把握しやすくなり、ボイラープレートコードが少なくなります。
Reduxには、非同期アクションを処理するためにRedux-ThunkやRedux-Sagaなどのミドルウェアが必要です。これらのミドルウェアにより、アクションが他のアクションを派遣するか、アクションの発送を遅らせることができます。一方、Mobxは、追加のミドルウェアを必要とせずに非同期アクションを直接処理できます。単一のアプリケーションで一緒に使用されます。ただし、これは不必要な複雑さにつながる可能性があるため、一般的に行われていません。一般に、プロジェクトの特定のニーズと制約に基づいていずれかを選択することをお勧めします。テスト。その予測可能な状態の変更と純粋な関数（還元剤）により、テストが簡単になります。 Mobxは、より動的な性質のためにテストするのは簡単ではありませんが、Jestなどのツールを使用して効果的にテストできます。
ReduxとMobxの間でパフォーマンスをどのように比較しますか？

ReduxとMobxの両方が優れたパフォーマンス特性を持ち、大きな状態の木を効率的に処理できます。ただし、MOBXは、状態の変化によって直接影響を受けるコンポーネントのみを更新する微細な観測可能性システムのために、特定のシナリオで特定のシナリオで優位性を持つことができます。？

Reduxには、MOBXと比較して、より大きなコミュニティとより成熟した生態系があります。 Reduxを学習するために利用できるリソースが増え、それを使用するように設計されたサードパーティライブラリが増えます。しかし、Mobxは人気を集めており、そのコミュニティは成長しています。より単純で、より少ないボイラープレートコーディングスタイルを好む、またはプロジェクトが状態の更新をきれいに制御する必要がある場合。また、Mobxがこれらを非常に活用しているため、チームがオブジェクト指向のプログラミングの概念に慣れている場合にも良い選択です。 > Reduxは、状態の変化の予測可能性と透明性が非常に重要な大規模なアプリケーションにとってより良い選択かもしれません。また、チームが機能的なプログラミングの概念に満足している場合、これは良い選択です。なぜなら、Reduxはこれらを大きく活用しているからです。さらに、Reduxの成熟した生態系と大規模なコミュニティが決定的な要因になる可能性があります。

以上がRedux vs Mobx：あなたのプロジェクトに最適なのはどれですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript graphql less edge Object define if for while try catch using class internal Collection JS function constructor this promise github react native ui bug everything Access Other

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：あなたの会社に適したフロントエンドフレームワークを選択する方法次の記事：あなたの会社に適したフロントエンドフレームワークを選択する方法

続きを見る

Redux vs Mobx：あなたのプロジェクトに最適なのはどれですか？

キーテイクアウト

1。学習して使用しやすい

1。自由が多すぎます

2。デバッグが難しい

ブートストラップ

この記事を無駄のないままにするために、1つのアクションのコードサンプルを紹介します。

redux vs mobx

ReduxとMobxの重要な違いは何ですか？

ReduxとMobxの間でパフォーマンスをどのように比較しますか？

関連記事