タグ付けされた質問 「reactjs-flux」

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が必要なのですか?) 元に戻す/やり直し機能 その他のポイントは?持続する状態のように...

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


11
Reactアプリケーションでサービスを利用する
私は、サービス/ファクトリーにロジックを抽出し、コントローラーでそれらを使用できる、角度のある世界から来ています。 Reactアプリケーションで同じことをどのように達成できるかを理解しようとしています。 ユーザーのパスワード入力を検証するコンポーネントがあるとします(それは強みです)。それはロジックがかなり複雑であるため、それ自体をコンポーネントに記述したくありません。 このロジックはどこに記述すればよいですか?フラックスを使用している場合、店で?または、より良いオプションはありますか?

3
Fluxアーキテクチャでは、ストアのライフサイクルをどのように管理しますか?
Fluxについて読んでいますが、Todoアプリの例は単純すぎて、いくつかの重要なポイントを理解できません。 ユーザープロフィールページを備えたFacebookのような単一ページのアプリを想像してみてください。各ユーザープロファイルページで、無限のスクロールでユーザー情報とその最後の投稿を表示します。ユーザープロファイル間を移動できます。 Fluxアーキテクチャーでは、これはどのようにストアとディスパッチャーに対応しますか? PostStoreユーザーごとに1つ使用するのでしょうか、それとも何らかのグローバルストアを使用するのでしょうか。ディスパッチャーについてはどうですか?「ユーザーページ」ごとに新しいDispatcherを作成しますか、それともシングルトンを使用しますか?最後に、ルートの変更に応じて「ページ固有」ストアのライフサイクルを管理するのは、アーキテクチャのどの部分ですか。 さらに、単一の疑似ページには、同じタイプのデータの複数のリストがある場合があります。たとえば、プロフィールページで、フォロワーとフォローの両方を表示したいとします。UserStoreこの場合、シングルトンはどのように機能しますか?だろUserPageStore管理followedBy: UserStoreとfollows: UserStore?


6
フラックスストア、またはアクション(またはその両方)は外部サービスに影響を与えるべきですか
ストアが独自の状態を維持し、その際にネットワークおよびデータストレージサービスを呼び出す機能を持っている場合、その場合のアクションは単なるメッセージパサーです。 -または- ...ストアは、アクションからの不変データの愚かな受信者である必要があります(アクションは、外部ソース間でデータをフェッチ/送信するものですか?このインスタンスのストアは、ビューモデルとして機能し、それらを集約/フィルタリングできます。アクションによって供給された不変データに基づいて独自の状態ベースを設定する前のデータ。 それはどちらか一方でなければならないようです(両方の組み合わせではありません)。もしそうなら、なぜ一方が他方よりも好ましい/推奨されるのですか?

6
非同期に初期化されたReact.jsコンポーネントのサーバー側レンダリングの戦略
最大の利点の一つReact.jsをすることになっているサーバー側のレンダリング。問題は、主要な機能React.renderComponentToString()が同期的であり、コンポーネント階層がサーバー上でレンダリングされるときに非同期データをロードできないことです。 コメント用の汎用コンポーネントがあり、ページのどこにでもドロップできるとしましょう。プロパティは1つだけで、なんらかの識別子(コメントが配置されている記事のIDなど)とその他すべてはコンポーネント自体(コメントの読み込み、追加、管理)によって処理されます。 Fluxアーキテクチャは、多くのことがはるかに簡単になり、そのストアがサーバーとクライアントの間で状態を共有するのに最適であるため、本当に気に入っています。コメントを含むストアを初期化したら、それをシリアル化してサーバーからクライアントに送信し、簡単に復元できます。 問題は、私のストアにデータを追加するための最良の方法は何ですか。過去数日間、私は多くのことをグググルグしていて、いくつかの戦略に出くわしましたが、Reactのこの機能がどれだけ「促進」されているかを考えると、どれも本当に良いようには見えませんでした。 私の意見では、最も簡単な方法は、実際のレンダリングが始まる前にすべてのストアにデータを取り込むことです。これは、コンポーネント階層の外側のどこかを意味します(たとえば、ルーターにフックされています)。このアプローチの問題は、ページ構造をほぼ2回定義する必要があることです。たとえば、多くの異なるコンポーネント(実際のブログ投稿、コメント、関連投稿、最新の投稿、Twitterストリーム...)を含むブログページなど、より複雑なページを考えてみます。Reactコンポーネントを使用してページ構造を設計する必要があり、それから別の場所で、この現在のページに必要な各ストアにデータを取り込むプロセスを定義する必要があります。それは私にとって良い解決策のようには思えません。残念ながら、ほとんどの同形のチュートリアルはこのように設計されています(たとえば、この素晴らしいflux-tutorial)。 React-async。このアプローチは完璧です。これにより、各コンポーネントの特別な関数で状態を初期化する方法(同期か非同期かは関係ありません)を簡単に定義でき、階層がHTMLにレンダリングされるときにこれらの関数が呼び出されます。これは、状態が完全に初期化されるまでコンポーネントがレンダリングされないように機能します。問題は繊維が必要なことですこれは、私が理解している限り、標準のJavaScriptの動作を変更するNode.js拡張機能です。結果は本当に気に入っていますが、解決策を見つけるのではなく、ゲームのルールを変更したようです。そして、React.jsのこのコア機能を使用するためにこれを強制される必要はありません。このソリューションの一般的なサポートについてもわかりません。標準のNode.js Webホスティングでファイバーを使用することは可能ですか? 私は少し独りで考えていました。実装の詳細についてはあまり考えていませんが、一般的な考え方は、コンポーネントをReact-asyncと同じように拡張し、ルートコンポーネントでReact.renderComponentToString()を繰り返し呼び出すというものです。各パスの間に、拡張コールバックを収集し、パスのandでそれらを呼び出して、ストアにデータを取り込みます。現在のコンポーネント階層に必要なすべてのストアにデータが入力されるまで、この手順を繰り返します。解決しなければならないことがたくさんあり、特にパフォーマンスについてはよくわかりません。 私は何か見落としてますか?別のアプローチ/解決策はありますか?現在、react-async / fibersの方法を検討していますが、2番目のポイントで説明したように、完全にはわかりません。 GitHubに関する関連ディスカッション。どうやら、公式なアプローチもソリューションもありません。おそらく本当の問題は、Reactコンポーネントがどのように使用されることが意図されているかです。シンプルなビューレイヤー(かなり私の提案の1番目)のように、または実際の独立したスタンドアロンコンポーネントのように?

4
react.jsでEnterキーを使用してフォームを送信する方法は?
これが私のフォームとonClickメソッドです。キーボードのEnterボタンを押したときにこのメソッドを実行したいのですが。どうやって ? 注意:jqueryは評価されません。 comment: function (e) { e.preventDefault(); this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value}) }, <form className="commentForm"> <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br /> <input type="text" placeholder="userPostId" ref="userPostId" /> <br /> <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button> </form>

4
Webpack-dev-serverは、アプリページの代わりにディレクトリリストを提供します
で実際のアプリしか見ることができません/public。 の構成webpack.config.jsは次のとおりです。 var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() …

9
反応コンポーネントのブール状態を切り替える方法は?
反応コンポーネントのブール状態を切り替える方法を知りたいのですが。例えば: コンポーネントのコンストラクターにブール状態チェックがあります。 constructor(props, context) { super(props, context); this.state = { check: false }; }; this.setStateメソッドを使用して、チェックボックスがクリックされるたびに状態を切り替えようとしています。 <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label> もちろん、Uncaught ReferenceErrorが発生します:チェックが定義されていません。では、どうすればこれを達成できますか? よろしくお願いします。

4
コンポーネントは、Stores in Fluxからエンティティをどの入れ子レベルで読み取る必要がありますか?
Fluxを使用するようにアプリを書き換えていますが、ストアからのデータの取得に問題があります。私はたくさんのコンポーネントを持っていて、それらはたくさん入れ子になっています。それらのいくつかは大きく(Article)、いくつかは小さくてシンプルです(UserAvatar、UserLink)。 私はストアからデータを読み取る必要があるコンポーネント階層のどこに苦労してきました。 私は2つの極端なアプローチを試しましたが、どちらもかなり気に入りました。 すべてのエンティティコンポーネントが独自のデータを読み取る Storeからのデータを必要とする各コンポーネントは、エンティティIDのみを受け取り、エンティティを独自に取得します。 たとえば、Article渡されarticleId、UserAvatarそしてUserLink渡されますuserId。 このアプローチには、いくつかの重大な欠点があります(コードサンプルで説明)。 var Article = React.createClass({ mixins: [createStoreMixin(ArticleStore)], propTypes: { articleId: PropTypes.number.isRequired }, getStateFromStores() { return { article: ArticleStore.get(this.props.articleId); } }, render() { var article = this.state.article, userId = article.userId; return ( <div> <UserLink userId={userId}> <UserAvatar userId={userId} /> </UserLink> <h1>{article.title}</h1> <p>{article.text}</p> <p>Read more by <UserLink …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.