React reduxとは

1.reduxとは

reduxとはfluxを拡張した実装であるというのがおそらく近いです。
fluxについてはReaut fluxとは参照。

2.背景

javascriptシングルページアプリケーションの要件がより複雑になるにつれて、私たちのコードはこれまで以上に多くの状態を管理する必要があります。この状態には、サーバーの応答とキャッシュされたデータ、およびサーバーにまだ永続化されていないローカルで作成されたデータが含まれることがあります。そしてアクティブなルート、選択したタブ、スピナー、ページネーションコントロールなどを管理する必要があるため、UIの状態も複雑さを増しています。

そのためreduxは、更新が発生する可能性がある方法とタイミングに特定の制限を課すことによって、状態の変化を予測可能にすることを目的としています。

3.原則

2で書いた特定制限を3つの原則と呼んでいます。

Single source of truth(信頼できる情報源は一つだけ)

・アプリケーション全体の状態(state)はツリーの形で1つのオブジェクトで作られ、1つのストアに保存されます

State is read-only(ステートは読み取り専用)

・状態を変更する唯一の方法は、何が起こったのかを記述するオブジェクトであるアクションを発行して実行することです。

Mutations are written as pure functions(変更はすべて純粋な関数で書かれる)

・アクションがどのように状態を変更するかを特定するために純粋な「Reducer」で行う。(「Reducer」は状態とアクションを受けて、新しい状態を返す関数)
・現在のstateオブジェクトを変更することはせずに、新しいstateオブジェクトを作って返す。
・開発するときは、最初はアプリケーションで一つのReducerを用意して、巨大化してきたらReducerを分割していくこと

4.役割

Action

FluxではActionをDispatcherに与えることでStoreの状態を更新していました。
ReduxではActionをStore(正確にはStoreの中のReducer)に与えることでStoreの状態を更新します。

Reducer

アクションを受けてどのようにStoreの状態を更新するかを記載します。
実態は単なる関数でStateとactionを引数として受け取り、新しいstateを返す関数です。

Store

ActionとReduserをまとめ、アプリで唯一の状態をStateとして保持します。

5.参考

公式ドキュメント
ReactとFluxとReduxについて順を追って整理する

About the author

さいとー

Add Comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

By さいとー

最近の投稿

アーカイブ

カテゴリー

タグクラウド

コーポレートサイト