Immutable.js の詳細な説明-jsチュートリアル-php.cn

Immutable.js の詳細な説明

php中世界最好的语言

リリース： 2018-03-07 11:54:53

オリジナル

2861 人が閲覧しました

今回は Immutable.js について詳しく説明します。Immutable.js を使用する際の注意事項は何ですか?実際の事例を見てみましょう。

react + router + redux プロジェクトにおける Immutable.js のアプリケーション

最初に Immutable を紹介します:

Immutable.js の出現は、関数型プログラミングのアイデアに由来しています。つまり、すべてのデータは、代わりにコピーされる必要があります。直接変更されました。関連する紹介については、公式 Web サイトを参照してください:

https://facebook.github.io/immutable-js/

したがって、ある程度のプログラミング経験がある場合は、Immutable が別のデータ構造ライブラリであることを理解できるでしょう。 ArrayList から LinkedList に変更するようなものです。 Immutable.js では、

JavaScript 構文自体の配列 ([]) とオブジェクト ({ }) が Immutable.List と Immutable.Map に変更されます。

しかし、結局のところ、ArrayList と LinkedList は両方とも List を継承しており、インターフェイスは比較的一貫しているので、それらを置き換えることは大きな問題ではありません。ただし、JavaScript ネイティブを置き換えるために Immutable を使用したい場合は、少し手間がかかります。複雑。

rreee

複雑ですが、もう少し注意してください。

それではreduxとrouterについてお話しましょう

ReduxにはReducerを分割できるcombineReducersメソッドがあります。例:

var map1 = Immutable.Map({a:1, b:2, c:3});var map2 = map1.set(&#39;b&#39;, 50);
map1.get(&#39;b&#39;); // 2/* ----------------悠长悠长的分割线---------------- */var list1 = Immutable.List.of(1, 2);var list2 = list1.push(3, 4, 5);var list3 = list2.unshift(0);var list4 = list1.concat(list2, list3);

ログイン後にコピー

次に質問が来ます:

状態を取得するとき、state.get('user') と state.user のどちらを使用しますか?

当然、state.user を使用します。なぜなら、combineReducers は Immutable を知らないからです。

(混ぜろとは言わないでください。1層の構造はこのようになりますが、複数の層はどうですか?複数人での共同作業はどうですか?1か所で混乱していると、どこでもエラーが発生します)

それでReact + Router + Redux プロジェクトで Immutable を使用したい場合は、ローカルで使用するか (ローカルで使用すると、基本的に非常に悪夢になります)、フルセットを使用します。

それから、ここを見てください (この人はcombineReducersを書き直しました):
https://github.com/gajus/redux-immutable

彼らのcombineReducersを使用すると、state.get('user ')を安全に使用できます。

combineReducers を解決すると同時に、react-router-redux の問題も解決しました (ルータが状態の下でルーティングモジュールとして使用されているが、Immutable の使用方法がわからないと想像してください):

https://github.com / gajus/redux-immutable#using-with-react-router-redux

ここまで述べたところで、使い方です

まず第一に、あなたのプロジェクトは標準でreact + router + reduxです。

次に、Immutable を導入する必要があります。

次に、これを行う必要があります:

redux-immutableを導入します

redux-immutableのREADME.mdに従って履歴を設定します(Ctrl+C、Ctrl+V)

すべてのReducerをマージするときにredux-immutableに切り替えますcombineReducers

状態に出入りするすべてのデータは、Immutable.js の Immutable.List と Immutable.Map を使用します (これが本当のトピックです)

他に注意すべき点はありますか?

コンポーネントの問題:

redux から生まれたアイデアは、コンポーネントを Smart と Dumb に分割することです。 Smart コンポーネントはデータの受信を担当し、Dumb コンポーネントはデータの使用を担当し、小道具のみに焦点を当てます。では、Immutable は Smart と Dumb をカバーするのでしょうか?

私の個人的な意見は次のとおりです:

ダムコンポーネントは基本的に抽象化され、複数のプロジェクトで共有される必要があります。これらのコンポーネントが Immutable をサポートしない方が良いでしょう。サポートしないと、Immutable に関連付けられてしまいます。

つまり、Dumb のデータは JavaScript にネイティブなデータであるということは、Immutable の利点を享受できないということではないでしょうか?

データはコンポーネントにコピーされているので、互換性のために少し犠牲にしても問題ありませんね?

このアイデアの背後にある結論は次のとおりです:

redux コンセプトのコンテナーは、state と props 間、および props とディスパッチ間を接続するときに、Immutable とネイティブの間の相互変換も実行します。 (アダプターパターン)

テストする場合:

Immutable.List を入力するのは非常に面倒に思えますが、console.log(imtb.toJS()) を使用することをお勧めします。デバッグのときくらい？

余談

これらの機能が JavaScript 自体に組み込まれていれば素晴らしいでしょう。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。