はじめに この記事はDMM.com #1 Advent Calendar 2017 の12/13の記事です。 Immutable.JSを使って、React+Redux製WebアプリのReducerをすっきりさせた方法と結果、及び注意点についてまとめました。 目的 Immutable.JSとは、Facebookが開発した、不変であるデータ構造を扱うためのJavaScriptライブラリです。 開発中だったReact+Reduxアプリでは、開発を進めれば進めるほど、ActionとReducerが肥大化し、改修がしづらくなっていました。 (Reducer内にロジックが含まれていたり、冗長な...stateを書く必要があったり…etc。) 今回は、Immutable.JSを使って、Reducerの肥大化を防ぎ、保守性・改修性を上げることを目的とします。 方法 今回は一般的なReact+Reduxアプ
immutable.js Advent Calendar 2017 2 日目の投稿です。「Redux に immutable.js を導入すると良いらしいが、まだ利用したことがない」という方向けの内容になります。「Reducer の Object.assign が手短に書ける便利ライブラリ」と認識されている方もいるかもしれません。immutable.Record は、immutable な collection を保持する Object に関数を付与することができ、モデルとして利用することが可能です。 React 状態管理の定番感が強い Redux は、その他にも多くの View ライブラリでバインディングがあります。View フレームワーク非使用のページでも、Redux を導入する価値は大きいです。しかし通常の ReduxStore の中身は巨大な json に過ぎず、MVVM アーキテ
こんにちは。フロントエンジニアの安達 (@ry0_adachi) です。 気付いたら前回の私の記事から2ヶ月が経ちました。時間の流れは早いですね...。 さて、今回はimmutableとそれをJSで実現するためのImmutable.jsについてです。 この記事を通して沢山の方にimmutableについて知ってもらえると嬉しいです。 immutableとは immutableは元となっているオブジェクトに変更を加えない、加えられない状態です。 また、変更を加える、加えられることをmutableと呼びます。 immutableの例 JSで配列に値を追加する際に let list = [1, 2] list.push(3) とやるとlistに3が追加されます。 これは元となっているlistに対して3を追加するという変更を加えているのでmutableです。 しかし、これをImmutable.jsの
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く