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

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

891 javascript  redux  react-redux  timeout 

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

358 reactjs  redux  react-redux 

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

240 javascript  modal-dialog  redux  react-redux 

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

219 javascript  reactjs  redux  react-redux 

axios POSTリクエストがコントローラーのURLにヒットしていますが、POJOクラスにnull値を設定しています。Chromeの開発者ツールを実行すると、ペイロードにデータが含まれています。何が悪いのですか？ Axios POSTリクエスト： var body = { userName: 'Fred', userEmail: 'Flintstone@gmail.com' } axios({ method: 'post', url: '/addUser', data: body }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ブラウザの応答： ヘッダーを次のように設定した場合： headers:{ Content-Type:'multipart/form-data' } リクエストはエラーをスローします multipart / form-dataの投稿中にエラーが発生しました。Content-Typeヘッダーに境界がありません 私が郵便配達員で同じリクエストを出すと、それはうまくいき、私のPOJOクラスに値を設定します。 誰でも境界を設定する方法や、axiosを使用してフォームデータを送信する方法を説明できますか？

203 reactjs  react-redux  axios  ajaxform  axios-cookiejar-support 

@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 …

192 reactjs  redux  react-redux 

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

187 javascript  reactjs  redux  react-redux  react-context 

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 

私は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 

Reactの世界の初心者なので、使用する{this.props.children}とどうなるか、また使用する状況はどうなるのかを深く理解したいと思います。以下のコードスニペットでそれの関連性は何ですか？ render() { if (this.props.appLoaded) { return ( <div> <Header appName={this.props.appName} currentUser={this.props.currentUser} /> {this.props.children} </div> ); } }

118 javascript  reactjs  react-redux  frontend 

Redux の関数に渡されるmapStateToPropsand mapDispatchToProps関数が2番目の引数として使用されることがわかります。connectownProps [mapStateToProps(state, [ownProps]): stateProps] (Function): [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): オプションの[ownprops]引数は何ですか？ Reduxのドキュメントにすでに1 つあるので、わかりやすくするために追加の例を探しています

95 redux  react-redux 

プレゼンテーションコンポーネントをコンテナコンポーネントから分離しようとしています。私はとを持ってSitesTableいSitesTableContainerます。コンテナは、現在のユーザーに基づいて適切なサイトをフェッチするためのreduxアクションをトリガーする役割を果たします。 問題は、コンテナコンポーネントが最初にレンダリングされた後、現在のユーザーが非同期にフェッチされることです。これは、コンテナコンポーネントがcomponentDidMount、に送信するデータを更新する関数内のコードを再実行する必要があることを認識していないことを意味しますSitesTable。小道具（ユーザー）の1つが変更されたときに、コンテナーコンポーネントを再レンダリングする必要があると思います。これを正しく行うにはどうすればよいですか？ class SitesTableContainer extends React.Component { static get propTypes() { return { sites: React.PropTypes.object, user: React.PropTypes.object, isManager: React.PropTypes.boolean } } componentDidMount() { if (this.props.isManager) { this.props.dispatch(actions.fetchAllSites()) } else { const currentUserId = this.props.user.get('id') this.props.dispatch(actions.fetchUsersSites(currentUserId)) } } render() { return <SitesTable sites={this.props.sites}/> } } function mapStateToProps(state) { const user = …

94 reactjs  redux  react-redux 

私はそれを理解しようとするためにReduxのtodoの例を分解しています。mapDispatchToPropsディスパッチアクションを小道具としてマップできることを読んだので、addTodo.jsdispatch（addTodo（））を呼び出す代わりにmapDispatchToPropsを使用するように書き換えることを考えました。呼んだaddingTodo()。このようなもの： import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> <input ref={node => { input = node }} /> <button type="submit">Submit</button> …

92 javascript  reactjs  redux  react-redux 

bindActionCreatorsのReduxドキュメントには、次のように記載されています。 の唯一の使用例bindActionCreatorsは、一部のアクションクリエーターをReduxを認識しないコンポーネントに渡し、ディスパッチまたはReduxストアを渡さない場合です。 bindActionCreators使用/必要になる例は何ですか？ どのようなコンポーネントがReduxを認識しませんか？ 両方のオプションの長所/短所は何ですか？ //actionCreator import * as actionCreators from './actionCreators' function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return bindActionCreators(actionCreators, dispatch) } 対 function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return { someCallback: (postId, index) …

91 reactjs  redux  react-redux