問題タブ [react-redux]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
24334 参照

reactjs - mapStateToProps はオブジェクトを返す必要があります。代わりにマップ {} を受け取りましたか?

こんにちは、状態に不変マップを使用しています。maspStateToProps を試すと、このエラーが発生します。

Uncaught Invariant Violation:mapStateToPropsオブジェクトを返す必要があります。代わりにマップ {} を受け取りました。

これが私のコードです:

成分:

減速機

0 投票する
1 に答える
507 参照

javascript - Browserify / Webpack (ES6 または CommonJS) を使用した JavaScript アセットのシミング

browserifyまたはwebpackのいずれかを使用して、余分なファイルなしでjavascriptを正しくシミングするにはどうすればよいですか?

react または react-redux の使用例を見てみましょう。package.json に次の構成があります。

私のプロジェクトでは、react-redux を lineimport { createStore, applyMiddleware } from 'redux';で使用し、react-redux を依存関係として追加しました。プロジェクトをコンパイルすると、約 20K 行の 1 つの JavaScript ファイルになります。

問題は、react-redux の cdnjs ( https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.0/react-redux.js) を使用して react-redux をシムし、それを browserify-shim 構成に追加すると、私のプロジェクトは約 2K 行しか使用せず、react-redux js ファイルだけで約 700 行しか使用しないことです (そして、プロジェクトはまだ機能しています!)。

なぜそれが起こるのですか?browserify-shim に react-redux を追加することはできませんが、コンパイル済みプロジェクトの JavaScript に 18K 行ではなく 700 行しか追加できませんか?

ここで実際に起こっている魔法とは?

0 投票する
1 に答える
496 参照

reactjs - mapStateToProps とプロパティがストアからのものではない

ストア以外のプロパティを に含めることは良い考えmapStateToPropsですか?

例えば

0 投票する
1 に答える
524 参照

redux - ajaxが解決するまで未定義のRedux状態とコンポーネントプロパティ

私のコンポーネントは、関数を使用して props を介していくつかのプロパティを取得します。

同じコンポーネントで ajax を使用して状態キーワードを取得しました。

コンポーネントが 2 回レンダリングされます。まず、ajax が解決される前に、私の render メソッドで未定義になりました。

それを解決する適切な方法はどれですか?私は成功せずに変更componentDidMountしました。componentWillMount

現在、実際の例に基づいて、キーワードの状態を空のオブジェクトで初期化しています。

私の減速機:

私の行動:

すべて実世界の還元例に基づく

私の解決策

キーワード エンティティに初期状態を指定します。私は ajax を介してこのような json を取得しています: {'locale': 'en', 'keywords': ['keyword1', 'keyword2']}レデューサーで説明したとおりです。

私が気に入らないのは、複数の言語がある場合のイニシャルです。また、別の言語 (fr など) を追加する場合は、イニシャルを変更することを忘れないでください。この中で

次のようにする必要があります。

0 投票する
1 に答える
249 参照

javascript - Redux アクション クリエーターは、別のアクション内で 1 つを呼び出します

私はReduxでアヒルを使用していますが、それは質問とは関係ありません。同じファイルにいくつかのアクション クリエーターがあり、一方を他方から呼び出したいと考えています (下の SWITCH のすべての CASE に対して二重にディスパッチする必要がないことを願っています)。

オープンは正常に機能しますが、クローズ機能は起動されません。open 関数の SWITCH で CASE ごとに二重にディスパッチせずに、open 関数内から close 関数を呼び出す方法はありますか?

二重ディスパッチとは、次のようなことを意味します...

可能であれば、close を 1 回だけ呼び出してから、指定された open を返したいと思います。

ティア!

0 投票する
2 に答える
8119 参照

javascript - コンテキストを介してストアを渡すconnect() ベースのシナリオで機能しない

編集: 要約 - 私の質問の最初の原因は実際にはタイプミスでした: 大文字の「G」が原因で機能しませんでした。

ただし、親切な回答者は、タイプミスだけでなく、私が取っていたアプローチの間違った前提にも対処しました-あなたもプロバイダー使用してストアを渡し、接続を使用している場合、彼らの回答はあなたに関連しています. これを反映するために質問のタイトルを更新しました。


私は素晴らしい redux ビデオ<Provider>の指示に従おうとしていますが、react-reduxを使用してストアを渡すことに悲しみを感じています。

私はルートコンポーネントを持っています:

そして、ストアを使用しようとしているプレゼンテーション コンポーネント:

「Uncaught TypeError: store.GetState is not a function」が表示されます

ストアはここから来ています:

ここに作成されます:

(私のコードではありません。反応ネイティブとブラウザークライアントをサポートするフレームワークであり、私が作業を開始しています)

私は何が欠けていますか?


これをビデオからコピーしています - AddTodo コンポーネントは connect() を使用して「ラップ」されていないことに注意してください:

0 投票する
1 に答える
472 参照

reactjs - 動的な子のインジェクションと Redux バインディング

React-Redux と Redux を使用している反応アプリに動的な子を挿入しようとしていますが、子の小道具のバインディングで問題が発生しています。問題を次のサンプル コード ( JSFiddle ) にまとめました。問題は、元のレンダリングされた要素は正常に更新されますが、動的に挿入された部分は更新されないことです。奇妙なことは、更新が redux ストアで取得され、小道具に正しく供給されることです。