タグ付けされた質問 「redux」

Reduxは、Fluxデザインパターンに基づくJavaScriptアプリケーションの予測可能な状態コンテナーです。

8
Facebook FluxでReduxを使用する理由 [閉まっている]
休業。この質問は意見に基づいています。現在、回答を受け付けていません。 昨年休業。 ロックされています。質問はトピックから外れていますが、歴史的に重要であるため、この質問とその回答はロックされています。現在、新しい回答や相互作用を受け入れていません。 私はこの答えを読んで、ボイラープレートを減らし、GitHubの例をいくつか見て、少しやり直してみました(todoアプリ)。 私が理解しているように、公式のredux doc動機は、従来のMVCアーキテクチャと比較して長所を提供します。しかし、それは質問に対する答えを提供しません: Facebook FluxではなくReduxを使用する理由 それはプログラミングスタイルの問題だけですか?機能か非機能か?または、問題はreduxアプローチから続く能力/開発ツールにありますか?たぶんスケーリング?またはテスト? reduxは関数型言語から来た人々にとって流動的なものだと言ってもよろしいですか? この質問に答えるために、実装の複雑さを比較することができます。 公式のredux docモチベーションのモチベーションポイントは次のとおりです。 楽観的な更新の処理(私が理解しているように、5番目の点にほとんど依存しません。Facebookの変化に実装するのは難しいですか?) サーバーでのレンダリング(facebookフラックスでもこれを行うことができます。reduxと比較して何か利点はありますか?) ルート遷移を実行する前にデータを取得する(facebookフラックスではなぜそれができないのですか?利点は何ですか?) ホットリロード(React Hot Reloadで可能です。なぜreduxが必要なのですか?) 元に戻す/やり直し機能 その他のポイントは?持続する状態のように...

12
タイムアウト付きのReduxアクションをディスパッチする方法は?
アプリケーションの通知状態を更新するアクションがあります。通常、この通知はエラーまたは何らかの情報です。その後、通知状態を最初の状態に戻す5秒後に別のアクションをディスパッチする必要があるため、通知はありません。これの主な理由は、通知が5秒後に自動的に消える機能を提供することです。 私はsetTimeout別のアクションを使用したり返したりすることができず、オンラインでこれを行う方法を見つけることができません。ですから、アドバイスは大歓迎です。

10
Reduxの非同期フローにミドルウェアが必要なのはなぜですか?
ドキュメントによれば、「ミドルウェアがなければ、Reduxストアは同期データフローのみをサポートします」とのことです。なぜそうなのかわかりません。コンテナコンポーネントが非同期APIを呼び出してdispatchからアクションを呼び出せないのはなぜですか? たとえば、フィールドとボタンという単純なUIを想像してください。ユーザーがボタンを押すと、フィールドにリモートサーバーからのデータが入力されます。 import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTypes = { STARTED_UPDATING: 'STARTED_UPDATING', UPDATED: 'UPDATED' }; class AsyncApi { static getFieldValue() { const promise = new Promise((resolve) => { setTimeout(() => { resolve(Math.floor(Math.random() * 100)); }, …

9
ES6ジェネレーターでredux-sagaを使用する場合とES2017 async / awaitでredux-thunkを使用する場合の長所/短所
現在、reduxタウンの最新の子供であるredux-saga / redux-sagaについての話はたくさんあります。アクションをリッスン/ディスパッチするためにジェネレーター関数を使用します。 頭redux-sagaをredux-thunk抱える前に、async / awaitで使用している以下のアプローチの代わりに、使用の賛否両論を知りたいと思います。 コンポーネントは次のようになります。通常どおりアクションをディスパッチします。 import { login } from 'redux/auth'; class LoginForm extends Component { onClick(e) { e.preventDefault(); const { user, pass } = this.refs; this.props.dispatch(login(user.value, pass.value)); } render() { return (<div> <input type="text" ref="user" /> <input type="password" ref="pass" /> <button onClick={::this.onClick}>Sign In</button> </div>); } } export …

30
Reduxストアの状態をリセットする方法は?
状態管理にReduxを使用しています。 ストアを初期状態にリセットするにはどうすればよいですか? たとえば、2つのユーザーアカウント(u1とu2)があるとします。 次の一連のイベントを想像してください。 ユーザーu1がアプリにログインして何かを行うので、一部のデータをストアにキャッシュします。 ユーザーがu1ログアウトします。 ユーザーu2はブラウザを更新せずにアプリにログインします。 この時点で、キャッシュされたデータはに関連付けu1られます。クリーンアップしたいと思います。 最初のユーザーがログアウトしたときにReduxストアを初期状態にリセットするにはどうすればよいですか?

6
mapDispatchToPropsとは何ですか?
私はReduxライブラリのドキュメントを読んでいましたが、次の例があります。 状態を読み取ることに加えて、コンテナコンポーネントはアクションをディスパッチできます。同様にmapDispatchToProps()、dispatch()メソッドを受け取り、プレゼンテーションコンポーネントに注入するコールバックプロップを返す、という関数を定義できます。 これは実際には意味がありません。mapDispatchToPropsすでに持っているのになぜ必要なのmapStateToPropsですか? また、次の便利なコードサンプルも提供しています。 const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 誰かがこの関数が何であるか、そしてなぜそれが有用であるかを素人の言葉で説明できますか?

7
アクションクリエーターでRedux状態にアクセスしますか?
私が以下を持っているとしましょう: export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return { type: SOME_ACTION, } } そのアクションクリエーターでは、グローバルストア状態(すべてのレデューサー)にアクセスしたいと思います。これを行う方が良いですか: import store from '../store'; export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return { type: SOME_ACTION, items: store.getState().otherReducer.items, } } またはこれ: export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return (dispatch, …
296 javascript  redux 

7
Fluxの代わりにReduxを使用することの欠点は何ですか[クローズド]
休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか?質問を更新して、事実と引用で回答できるようにします。この投稿を編集。 昨年休業。 この質問を改善する 最近Reduxを発見しました。それはすべてよさそうだ。FluxではなくReduxを使用することの欠点、落とし穴、妥協点はありますか?ありがとう

5
非同期アクションを実行するReduxでモーダルダイアログを表示するにはどうすればよいですか?
状況によっては確認ダイアログを表示する必要があるアプリを作成しています。 何かを削除したいとしdeleteSomething(id)、いくつかのレデューサーがそのイベントをキャッチし、それを表示するためにダイアログレデューサーを埋めるように、アクションをディスパッチします。 このダイアログが送信されたときに私の疑問が生じます。 このコンポーネントは、ディスパッチされた最初のアクションに従って適切なアクションをどのようにディスパッチできますか? アクション作成者はこのロジックを処理する必要がありますか? レデューサー内にアクションを追加できますか? 編集: より明確にするために: deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id) createThingB(id) => Show dialog with Questions => createThingBRemotely(id) だから私はダイアログコンポーネントを再利用しようとしています。ダイアログの表示/非表示は、レデューサーで簡単に実行できるため問題ではありません。私が指定しようとしているのは、左側からフローを開始するアクションに従って、右側からアクションをディスパッチする方法です。

2
Redux @connectデコレーターの '@'(アットマーク)は何ですか?
私はReactでReduxを学んでいて、このコードに出くわしました。Redux固有かどうかはわかりませんが、いずれかの例で次のコードスニペットを確認しました。 @connect((state) => { return { key: state.a.b }; }) の機能connectはかなり単純ですが、@以前はわかりませんconnect。私が間違っていなければ、それはJavaScriptオペレーターでさえありません。 誰かがこれは何で、なぜそれが使用されているのか説明してもらえますか? 更新: 実際react-reduxには、ReactコンポーネントをReduxストアに接続するために使用されます。

6
Redux-複数の店舗、なぜそうではないのですか?
注:私はRedux(Baobabも)のドキュメントを読み、グーグルとテストのかなりの部分を行いました。 Reduxアプリにストアが1つしかないことが強く推奨されているのはなぜですか? 私は、単一ストアのセットアップと複数ストアのセットアップの長所/短所を理解しています(このテーマについては、SOに関する多くのQ&Aがあります)。 IMO、このアーキテクチャ上の決定は、プロジェクトのニーズに基づいてアプリ開発者に属しています。では、なぜそれがとても強くReduxのため、ほとんど必須鳴らすのポイントに提案されている(何もかかわらず、複数の店舗を作るから私たちを停止していますか)? 編集:シングルストアに変換した後のフィードバック 多くの人が複雑なSPAと考えるものについてreduxで作業した数か月後、単一のストア構造で作業することは純粋に嬉しかったと言えます。 単一のストアと多くのストアが多くの多くのユースケースで根本的な問題である理由を他の人が理解するのに役立ついくつかのポイント: 信頼性があります。セレクターを使用してアプリの状態を調べ、コンテキストに関連する情報を取得します。必要なすべてのデータが1つのストアにあることがわかっています。それは、州の問題がどこにあり得るかについてのすべての質問を避けます。 それは速いです:私たちの店は現在、100以上の減速機を持っています。その数でさえ、ごく一部のレデューサーのみが特定のディスパッチのデータを処理し、他のレデューサーは以前の状態を返します。巨大/複雑なストア(reducerのnbr)が遅いという主張は、かなり根拠のないものです。少なくともそこからパフォーマンスの問題が発生することはありません。 デバッグしやすい:これは全体としてreduxを使用するのに最も説得力のある引数ですが、シングルストアとマルチストアのどちらにも当てはまります。プロセスで状態エラー(プログラマーのミス)が発生することになっているアプリをビルドする場合、それは正常です。PITAは、これらのエラーのデバッグに数時間かかる場合です。単一のストア(およびredux-logger)のおかげで、特定の状態の問題に数分以上費やすことはありませんでした。 いくつかのポインタ reduxストアの構築における真の課題は、それをどのように構成するかを決定するときです。第一に、将来の構造変更はただの大きな痛みなのでです。第二に、それは主に使用方法を決定し、あらゆるプロセスのアプリデータをクエリするためです。ストアの構成方法については、多くの提案があります。私たちの場合、次のことが理想的であることがわかりました。 { apis: { // data from various services api1: {}, api2: {}, ... }, components: {} // UI state data for each widget, component, you name it session: {} // session-specific information } このフィードバックが他の人に役立つことを願っています。 編集2-役立つストアツール 単一のストアを「簡単に」管理する方法を疑問に思っている方は、すぐに複雑になる可能性があります。ストアの構造的な依存関係/ロジックを分離するのに役立つツールがあります。 スキーマに基づいてデータを正規化するNormalizrがあります。次にid、辞書と同様に、データを操作し、によってデータの他の部分をフェッチするためのインターフェースを提供します。 当時のNormalizrを知らなかったので、同じように何かを作りました。relational-jsonはスキーマを受け取り、テーブルベースのインターフェースを返します(データベースに少し似ています)。Relational-jsonの利点は、データ構造がデータの他の部分を動的に参照することです(基本的に、通常のJSオブジェクトと同様に、データを任意の方向にトラバースできます)。それはNormalizrほど成熟していませんが、私は数か月間、本番環境で正常に使用しています。
221 javascript  redux 

7
React-ReduxとmapStateToProps()を理解する
私はreact-reduxの接続方法と、それがパラメーターとして取る関数を理解しようとしています。特にmapStateToProps()。 私の理解では、の戻り値はmapStateToProps、(ストアに存在する)状態から派生したオブジェクトであり、そのキーはターゲットコンポーネント(コンポーネントの接続が適用される)に小道具として渡されます。 つまり、ターゲットコンポーネントによって使用される状態は、ストアに格納される状態とは大きく異なる構造を持つ可能性があります。 Q:大丈夫ですか? Q:これは予想されますか? Q:これはアンチパターンですか?

4
ES6クラスベースのReactコンポーネントと機能的なES6 Reactコンポーネントをいつ使用するのですか?
Reactの学習に少し時間を費やした後、コンポーネント作成の2つの主要なパラダイムの違いを理解しました。 私の質問は、いつどちらを使用する必要があるのか​​、そしてその理由は何ですか?一方の利点ともう一方の利点は何ですか? ES6クラス: import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } 機能的: const MyComponent = (props) => { return ( <div></div> ); } そのコンポーネントによって操作される状態がないときはいつでも機能的だと思いますが、それはそれですか? ライフサイクルメソッドを使用する場合は、クラスベースのコンポーネントを使用するのが最善だと思います。

4
レデューサーでアクションをディスパッチできますか?
レデューサー自体でアクションをディスパッチすることは可能ですか?プログレスバーとオーディオ要素があります。目標は、オーディオ要素で時間が更新されたときにプログレスバーを更新することです。しかし、プログレスバーを更新するために、ontimeupdateイベントハンドラをどこに配置するか、またはontimeupdateのコールバックでアクションをディスパッチする方法がわかりません。これが私のコードです: //reducer const initialState = { audioElement: new AudioElement('test.mp3'), progress: 0.0 } initialState.audioElement.audio.ontimeupdate = () => { console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration); //how to dispatch 'SET_PROGRESS_VALUE' now? }; const audio = (state=initialState, action) => { switch(action.type){ case 'SET_PROGRESS_VALUE': return Object.assign({}, state, {progress: action.progress}); default: return state; } } export default audio;
196 reactjs  redux  reducers 

9
反応コンポーネントの外でreduxストアにアクセスする最良の方法は何ですか?
@connect反応コンポーネント内のストアにアクセスしようとすると、うまく機能します。しかし、他のコードでどのようにアクセスすればよいでしょうか。たとえば、アプリでグローバルに使用できるaxiosインスタンスを作成するために認証トークンを使用したいとしましょう。それを達成するための最良の方法は何でしょうか? これは私の api.js // tooling modules import axios from 'axios' // configuration const api = axios.create() api.defaults.baseURL = 'http://localhost:5001/api/v1' api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here api.defaults.headers.post['Content-Type'] = 'application/json' export default api 次に、ストアからデータポイントにアクセスしたいと思います。次のコマンドを使用して、reactコンポーネント内でデータポイントをフェッチしようとすると、このようになります。 @connect // connect to store @connect((store) => { return { auth: store.auth } }) export default …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.