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

Reduxに移行します。 私のアプリケーションは多くのパーツ（ページ、コンポーネント）で構成されているため、多くのレデューサーを作成したいと考えています。Reduxの例は、combineReducers()1つのレデューサーを生成するために使用する必要があることを示しています。 また、私が理解しているように、Reduxアプリケーションは1つのストアを持つ必要があり、アプリケーションが起動すると作成されます。ストアが作成されているときに、結合したレデューサーを渡す必要があります。アプリケーションが大きすぎない場合、これは理にかなっています。 しかし、複数のJavaScriptバンドルをビルドするとどうなりますか？たとえば、アプリケーションの各ページには独自のバンドルがあります。この場合、結合された1つの減速機は良くないと思います。Reduxのソースを調べたところ、replaceReducer()機能が見つかりました。私が欲しいもののようです。 アプリケーションの各部分に結合されたレデューサーを作成し、アプリケーションのreplaceReducer()部分間を移動するときに使用できます。 これは良いアプローチですか？

187 javascript  flux  redux  code-splitting 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 2年前休業。 この質問を改善する React 16.3.0がリリースされ、Context APIは実験的な機能ではなくなりました。ダン・アブラモフ（Reduxのの作成者は）良いコメントを書き込みました。ここではこのことについて、コンテキストが、まだ実験的な機能だった2年でした。 私の質問は、あなたの意見/経験では、React ReduxよりもReact Contextをいつ使用する必要があるか、またはその逆ですか？

187 javascript  reactjs  redux  react-redux  react-context 

状態ツリーの一部をlocalStorageに永続化したい。そのための適切な場所はどこですか？レジューサーまたはアクション？

166 javascript  redux  local-storage  state 

コンポーネントがReactで再レンダリングされる原因をデバッグする体系的なアプローチはありますか？シンプルなconsole.log（）を使用して、何回レンダリングされるかを確認しましたが、私の場合、コンポーネントが複数回（つまり4回）レンダリングする原因を突き止めるのに問題があります。タイムラインやすべてのコンポーネントツリーのレンダリングと順序を表示するツールはありますか？

156 reactjs  redux 

これは、Google Adsenseアプリケーションページの例です。メインページの前に表示されるロード画面が後に表示されます。 Reactで同じことを行う方法がわかりません。Reactコンポーネントによってレンダリングされたロード画面を作成すると、ページがロードされている間は、DOMがレンダリングされるまで待機する必要があるため表示されません。 更新： 私は、スクリーンローダーを配置index.htmlしてReact componentDidMount()ライフサイクルメソッドで削除することで、私のアプローチの例を作成しました。 例とreact-loading-screen。

150 reactjs  asynchronous  redux 

Reduxを使用しています。私のレデューサーでは、次のようにオブジェクトからプロパティを削除しようとしています： const state = { a: '1', b: '2', c: { x: '42', y: '43' }, } そして、私は元の状態を変更することなく、このようなものを持ちたいです： const newState = { a: '1', b: '2', c: { x: '42', }, } 私は試した： let newState = Object.assign({}, state); delete newState.c.y しかし、いくつかの理由により、両方の州からプロパティが削除されます。 それを行うのに役立ちますか？

145 javascript  immutability  redux 

ここに完全なコード：https : //gist.github.com/js08/0ec3d70dfda76d7e9fb4 こんにちは、 ビルド環境に基づいてデスクトップ用とモバイル用の異なるテンプレートを表示するアプリケーションがあります。 モバイルテンプレートのナビゲーションメニューを非表示にする必要がある場所で、開発に成功しました。 現在、proptypeを介してすべての値をフェッチし、正しくレンダリングする1つのテストケースを作成できます。 しかし、モバイルがナビゲーションコンポーネントをレンダリングしてはならない場合の単体テストケースの記述方法はわかりません。 試しましたが、エラーが発生しています...修正方法を教えてください。 以下のコードを提供します。 テストケース import {expect} from 'chai'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; import {SportsTopPortion} from '../../../src/components/sports-top-portion/sports-top-portion.jsx'; require('../../test-utils/dom'); describe('"sports-top-portion" Unit Tests', function() { let shallowRenderer = TestUtils.createRenderer(); let sportsContentContainerLayout ='mobile'; let sportsContentContainerProfile = {'exists': 'hasSidebar'}; let sportsContentContainerAuthExchange = {hasValidAccessToken: true}; …

142 reactjs  mocha  redux 

arr[]レデューサーのredux状態の配列に要素を追加するにはどうすればよいですか？私はこれをやっています- import {ADD_ITEM} from '../Actions/UserActions' const initialUserState = { arr:[] } export default function userState(state = initialUserState, action) { console.log(arr); switch (action.type) { case ADD_ITEM: return { ...state, arr: state.arr.push([action.newItem]) } default: return state } }

140 react-native  redux  react-redux 

リアクティブreduxのコンポーネントとコンテナーの違いは何ですか？

135 javascript  reactjs  redux 

クラス内にコンポーネントを記述する代わりに、関数構文を使用したいと思います。 関数コンポーネント内でをオーバーライドするにcomponentDidMountはどうすればよいcomponentWillMountですか？ 可能ですか？ const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }; return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) }

134 reactjs  redux 

私はRedux-Sagaを使用しました。それを使って書かれたコードは、JSジェネレーター関数が時々混乱していることを除いて、これまでのところ簡単に推論できます。私の理解から、Redux-Observableは、ジェネレーター関数を使用せずに、副作用を処理する同様のジョブを実行できます。 ただし、Redux-Observableのドキュメントには、Redux-Sagaより優れている理由についての多くの意見はありません。ジェネレータ関数を使用しないことがRedux-Observableを使用する唯一の利点であるかどうかを知りたいのですが。そして、Redux-Sagaの代わりにRedux-Observableを使用することの欠点、落とし穴、または妥協点は何ですか？前もって感謝します。

133 javascript  redux  reactive-programming  redux-saga  redux-observable 

作成、読み取り、更新、削除に使用するフォームを1つ取得しました。同じフォームで3つのコンポーネントを作成しましたが、異なるプロップを渡しました。CreateForm.js、ViewForm.js（削除ボタンでは読み取り専用）、UpdateForm.jsを取得しました。 以前はPHPを使用していたため、これらを常に1つの形式で行いました。 ストアの管理にはReactとReduxを使用しています。 CreateFormコンポーネントを使用しているときに、サブコンポーネントにこのプロパティを渡して、createForm={true}入力に値を入力せず、無効にしないようにします。私のViewFormコンポーネントでは、この小道具を渡しますreadonly="readonly"ます。 そして、値で満たされていて更新できないtextareaで別の問題が発生しました。値を持つ反応テキストエリアは読み取り専用ですが、更新する必要があります フォームのこれらの異なる状態を処理するコンポーネントを1つだけ持つのに最適な構造は何ですか？ 共有するアドバイス、チュートリアル、ビデオ、デモはありますか？

128 javascript  reactjs  crud  redux 

APIサーバーからトークンを取得するreact / reduxアプリケーションがあります。ユーザーが認証された後、すべてのaxiosリクエストがそのトークンをAuthorizationヘッダーとして持つようにし、アクション内のすべてのリクエストに手動でトークンを添付する必要がないようにします。私は反応/ reduxをかなり始めたばかりで、最善のアプローチについて確信が持てず、Googleで質の高いヒットを見つけていません。 これが私のreduxセットアップです： // actions.js import axios from 'axios'; export function loginUser(props) { const url = `https://api.mydomain.com/login/`; const { email, password } = props; const request = axios.post(url, { email, password }); return { type: LOGIN_USER, payload: request }; } export function fetchPages() { /* here is where …

128 reactjs  redux  axios 

私はjavascript / redux / reactの初心者で、redux、react-redux、reactを使用して小さなアプリケーションを作成しています。何らかの理由で、connect（react-reduxバインディング）と並行してmapDispatchToProps関数を使用すると、結果のプロップを実行しようとすると、ディスパッチが関数ではないことを示すTypeErrorが表示されます。ただし、ディスパッチを小道具として呼び出すと（提供されたコードのsetAddr関数を参照）、機能します。 なぜなのか、私は知りたいのですが、reduxドキュメントのTODOアプリの例では、mapDispatchToPropsメソッドが同じ方法で設定されています。関数内のconsole.log（dispatch）は、ディスパッチがオブジェクト型であると述べています。この方法でディスパッチを使い続けることもできますが、reduxをさらに続行する前に、なぜこれが起こっているのかを理解するのが良いでしょう。私はコンパイルにbabel-loadersでwebpackを使用しています。 私のコード： import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: this.refs.pickup.state.address, …

124 javascript  reactjs  redux  react-redux 

サガ関数内のredux状態にアクセスするにはどうすればよいですか？ 短い答え： import { select } from 'redux-saga/effects'; ... let data = yield select(stateSelectorFunction);

121 javascript  reactjs  redux  react-redux  redux-saga