web-dev-qa-db-ja.com

ReduxをいつReactアプリに追加する必要がありますか？

現在、Reactを学習しています。Reduxでモバイルアプリを構築するためにそれを使用する方法を見つけようとしています。たとえば、このチュートリアルをReact https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript で完了しましたが、今、私はそのアプリにいくつかのレデューサー/アクションを追加して遊んでみたいと思っていますが、それらが私がすでにやったこととどこで結びつくのかわかりません。

javascriptmobilereactjsreduxreducers
63
user3802348

Reactは、通常、何らかのコンポーネントによって「所有」された状態として記述される「真実のソース」に応じてUIの更新を処理するUIフレームワークです。 Reactで考える は、React状態の所有権の概念を非常によく説明しています。

この状態所有モデルは、状態が階層的であり、コンポーネント構造にほぼ一致する場合にうまく機能します。このようにして、状態は多くのコンポーネントに「広がり」、アプリは理解しやすくなります。

ただし、たとえば、フェッチしたデータをキャッシュし、同時にどこでも一貫して更新したい場合など、アプリの離れた部分で同じ状態にアクセスしたい場合があります。この場合、Reactモデルに従うと、コンポーネントツリーの最上部に非常に大きなコンポーネントが多数配置され、いくつかの中間コンポーネントを介して無数の小道具が渡されます。それらを使用せず、そのデータを実際に気にするいくつかのリーフコンポーネントに到達するためだけに。

この状況に陥ると、can（ただし、必要はありません）Reduxを使用して、この状態管理ロジックを上から「抽出」します-コンポーネントを「リデューサー」と呼ばれる個別の関数にレベル化し、アプリ全体に小道具を渡すのではなく、その状態を直接気にするリーフコンポーネントを「接続」します。この問題がまだない場合は、おそらくReduxは必要ありません。

最後に、Reduxはこの問題の最終的な解決策ではないことに注意してください。 Reactコンポーネント以外のローカル状態を管理する方法は他にもたくさんあります。たとえば、Reduxが気に入らない人の中には MobX に満足している人がいます。最初にReact状態モデルをしっかりと理解してから、さまざまなソリューションを個別に評価し、それらを使用して小さなアプリを構築して、長所と短所を把握します。

（この答えは、ピートハントの react-howto ガイドに触発されたものです。同様に読むことをお勧めします。）

132
Dan Abramov

Reduxをアプリケーション/スタックに追加する理想的な方法は、afteryou/app/teamがその痛みを感じるまで待つことです。解決します。 propsの長いチェーンが構築され、複数のレベルのコンポーネントに渡されるか、複雑な状態の操作/読み取りを調整することに気づいたら、それはReduxなどを導入することでアプリにメリットがあるかもしれません。

「ちょうどReact」で既にビルドしたアプリを使用して、Reduxがどのように適合するかを確認することをお勧めします。一度に1つの状態または一連の「アクション」を取り出すことで、それを優雅に紹介できるかどうかを確認します。アプリのビッグバンリライトにこだわることなく、リファクタリングします。付加価値のある場所がまだわからない場合は、Reactの上にReduxのようなものを追加するのに十分な大きさまたは複雑でないアプリの兆候である可能性があります。

まだそれを見つけていない場合、ダン（上記で回答済み）には、Reduxをより基本的なレベルで説明する素晴らしい短編ビデオシリーズがあります。その一部を吸収するのに時間をかけることを強くお勧めします： https://egghead.io/series/getting-started-with-redux

Reduxには、非常に優れたドキュメントもあります。特に http://redux.js.org/docs/introduction/ThreePrinciples.html のような「理由」の多くを説明する

30
Erik Aybar

Reduxを理解するために、このドキュメントを準備しました。これがあなたの疑念をクリアすることを願っています。

-------------------------- REDUXチュートリアル----------------------

アクション-アクションは、アプリケーションからストアにデータを送信する情報のペイロードです。これらは、ストアからの唯一の情報源です。 store.dispatch（）を使用してのみ送信できます。

   Example-
const  ADD_TODO = 'ADD_TODO'

{
   type:ADD_TODO,
   text: 'Build my first redux app'
}

アクションはプレーンなJavaScriptオブジェクトです。アクションには、実行されるアクションのタイプを示す[type]プロパティが必要です。型は文字列定数として定義する必要があります。

アクションクリエーター----- ---------------- ----アクションクリエーターは、まさにアクションを作成する機能です。アクションとアクションクリエーターという用語を混同するのは簡単です。 reduxアクションでは、作成者はアクションを返します。

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

ディスパッチを初期化するには、結果をdispatch（）関数に渡します。

  1. dispatch（addToDo（text））;
  2. dispatch（completeToDo（index））

または、自動的にディスパッチするバインドされたアクションクリエーターを作成できます。

cosnt boundAddTodO = text => dispatch(addToDo(text));

今、あなたはそれを直接呼び出すことができます

boundaddTodO(text);

Dispatch（）functionnはstore.dispatch（）から直接アクセスできます。ただし、ヘルパーのconnect（）メソッドを使用してアクセスします。

Actions.js .....................

行動...........

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

アクションクリエーター

エクスポート関数addToDO（text）{return {type：ADD_TODO、text}}

......................... REDUCERS ........................ ..........

レデューサーは、ストアに送信されたアクションに応じてアプリケーションの状態がどのように変化するかを指定します。

状態形状の設計

Reduxでは、すべてのアプリケーションの状態は単一のオブジェクトに保存されます。一部のデータと一部の状態を保存する必要があります。

{visibilityFilter： 'SHOW_ALL'、todos：[{text： 'reduxの使用を検討する'、完了：true}、{text： '単一ツリーのすべての状態を維持する'}}}

アクションの処理----------------レデューサーは、前の状態とアクションを取り、新しい状態を返す純粋な関数です。

（previousState、アクション）=> newState

最初に初期状態を指定することから始めます。 Reduxは、未定義の状態で初めて減速機を呼び出します。これは、アプリの状態を返すチャンスです。

import  { visiblilityFilters } from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []
}

function todoApp(state, action){
    if(typeof state == 'undefined'){
        return initialState;
    }

    // dont handle other cases as of now.
    return state;
}

あなたはJSを扱うES6の方法を使用して同じことを行うことができます

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

................................. STORE ................ ...................

ストアは、それらをまとめるオブジェクトです。ストアには次の責任があります

  1. アプリケーションの状態を保持
  2. getState（）による状態へのアクセスを許可します
  3. Dispatch（）による状態の更新を許可します
  4. Suscriber（listener）を介してリスタネラーを登録する

注意。 composeReducers（）を使用して、複数のレデューサーを1つに結合します。

const store = createStore（todoapp）; // todoappはレデューサーです

3
Rajneesh Shukla

enter image description here

これがreduxの仕組みです。アクションは、コンポーネントまたはビューからディスパッチされます。アクションは「タイプ」プロパティを持たなければならず、発生したアクションの情報を保持するプロパティである場合があります。アクションで渡されるデータは、異なるレデューサーに関連する可能性があるため、同じオブジェクトが異なるレデューサーに渡されます。各レデューサーは、その一部/状態への貢献を取得/作成します。次に出力がマージされ、新しい状態が形成され、状態変更イベントにサブスクライブする必要があるコンポーネントに通知されます。

上記の例では、茶色には3つのコンポーネントRGBがすべてあります。各減速機は同じ茶色を受け取り、色への寄与を分離します。

1
Ratnesh Lal

アプリケーションを記述するとき、アプリケーションの状態を管理する必要があります。 Reactは、propsまたはコールバックを使用できるコンポーネント間で状態を共有する必要がある場合、コンポーネント内で状態をローカルに管理します。

しかし、アプリケーションが成長するにつれて、状態と状態変換の管理が難しくなります。アプリケーションをデバッグするには、状態と状態変換を適切に追跡する必要があります。

Reduxは、状態と状態の変換を管理するJavaScriptアプリの予測可能な状態コンテナーであり、Reactでよく使用されます。

Reduxの概念は、次の図で説明できます。

Redux

ユーザーがコンポーネントと対話し、ストアにアクションがディスパッチされたときにユーザーがアクションをトリガーすると、ストアのレデューサーはアクションを受け入れ、ストアの更新があるときにアプリケーションの状態を更新し、アプリケーション全体の不変のグローバル変数に保存します状態にサブスクライブしている対応するビューコンポーネントが更新されます。

状態はグローバルに管理され、reduxで管理されるため、保守が容易です。

1
Samuel J Mathew

まず、必要ない場合は、アプリケーションにReduxを追加する必要はありません！シンプルなので、それがまったく必要ない場合は、プロジェクトに強制的に含めないでください！しかし、それはReduxがダメという意味ではなく、大規模なアプリケーションで本当に役立つので、読んでください...

Reduxは、Reactアプリケーション、状態を追跡するローカルストアのようなReduxについて考え、どのページやルートでも状態にアクセスできます。また、Fluxと比較して、ストアが1つしかないということは、真実の1つのソースを意味します...

Reduxが最初に行うことを一目で理解するには、この画像を見てください。

enter image description here

また、これがReduxの自己紹介です。

Reduxは、JavaScriptアプリの予測可能な状態コンテナーです。

一貫して動作し、異なる環境（クライアント、サーバー、ネイティブ）で実行され、テストが簡単なアプリケーションを作成するのに役立ちます。さらに、ライブコード編集とタイムトラベルデバッガーの組み合わせなど、優れた開発者エクスペリエンスを提供します。

Reduxは、Reactまたは他のビューライブラリと一緒に使用できます。それは小さい（依存関係を含む2kB）。

また、ドキュメントごとに、以下のReduxの3つの原則があります。

1。単一の真実の情報源

2。状態は読み取り専用です

3。変更は純関数で行われます

したがって、基本的に、アプリケーションで好きなものを追跡するために単一のストアが必要な場合、Reduxは便利で、アプリのどこからでも、どのルートでもアクセスできます...単にstore.getState();を使用して

また、ミドルウェアReduxを使用すると、状態をより良く管理できます。Reduxの公式ページに便利なコンポーネントとミドルウェアのリストがあります！

アプリケーションが大きくなり、多くのコンポーネント、状態、およびルーティングを使用する場合は、最初からReduxを実装しようとします！それは確かにあなたを助けます！

1
Alireza