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

2番目のパラメータとしてGETリクエストを送信しようとしていますが、URLとして実行している間は機能しません。 これは機能し、$ _ GET ['naam']はテストを返します。 export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; しかし、これを試してみると、何もありません$_GET。 export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php', { password: 'pass', naam: naam, score: …

121 reactjs  react-native  redux  axios 

複数の言語とロケールで利用できるようにする必要があるアプリを作成しています。 私の質問は、純粋に技術的なものではなく、アーキテクチャと、人々がこの問題を解決するために実際に本番で使用しているパターンについてです。そのための「クックブック」はどこにも見つからなかったので、お気に入りのQ / A Webサイトに移動します:) ここに私の要件があります（それらは本当に「標準」です）： ユーザーは言語を選択できます（簡単です） 言語を変更すると、インターフェースは自動的に新しく選択された言語に翻訳されます 現時点では、数値や日付などのフォーマットについてあまり心配していません。文字列を翻訳するだけの簡単な解決策が欲しいのですが ここに私が考えることができる可能な解決策があります： 各コンポーネントは個別に翻訳を処理します つまり、各コンポーネントには、翻訳された文字列と一緒に、たとえばen.json、fr.jsonなどの一連のファイルがあります。また、選択した言語に応じて値を読み取るのに役立つヘルパー関数。 プロ：Reactの哲学を尊重し、各コンポーネントは「スタンドアロン」です 短所：すべての翻訳をファイルに一元化することはできません（たとえば、誰かに新しい言語を追加させるため） 短所：すべての流血のコンポーネントとその子供に、現在の言語を小道具として渡す必要があります 各コンポーネントは、小道具を介して翻訳を受け取ります したがって、彼らは現在の言語を認識していません。たまたま現在の言語と一致する小道具として文字列のリストを取得します プロ：これらの文字列は「上から」来るため、どこかに集中させることができます 短所：各コンポーネントが翻訳システムに関連付けられているため、コンポーネントを再利用するだけではなく、毎回正しい文字列を指定する必要があります。 小道具を少しバイパスし、おそらくコンテキストの事を使用して現在の言語を伝えます プロ：それはほとんど透過的で、現在の言語や翻訳をプロップを介して常に渡す必要はありません 短所：使用するのが面倒に見える 他にアイデアがあれば、言ってください！ どうやってやるの？

119 architecture  internationalization  reactjs  translation  redux 

入力を変更することは想定されていないため、オブジェクトを複製して変更する必要があります。私は以下を使用するreduxスタータープロジェクトで使用される規則に従っていました： ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) アイテムを追加する場合-配列にアイテムを追加するためにスプレッドを使用します。 私が使用した削除： DELETE_ITEM: (state, action) => ({ ...state, items: [...state.items.splice(0, action.payload), ...state.items.splice(1)], lastUpdated: Date.now() }) しかし、これは入力状態オブジェクトを変更しています-新しいオブジェクトを返しているにもかかわらず、これは禁止されていますか？

116 javascript  reactjs  redux 

Reactアプリを実行しようとすると、次のエラーが発生します。 ./src/components/App/App.js インポートエラーの試行：「combineReducers」 は「../../store/reducers/」からエクスポートされません。 これが私がエクスポートする方法ですcombineReducers： import { combineReducers } from 'redux'; import userReducers from './userReducers'; import articleReducers from './articleReducers'; export default combineReducers({ userReducers, articleReducers }); これが私がそれをインポートする方法ですApp.js： import { combineReducers } from '../../store/reducers'; エクスポート方法の何が問題になっていcombineReducersますか？

116 reactjs  redux 

ReduxがFluxのより良い「実装」であるか、または物事を単純化するための再設計（アプリケーションの状態管理）であるとよりよく言うことを私は知っています。 私はリアクティブプログラミング（RxJS）について多くのことを聞いたことがありますが、それを学ぶためにまだ潜っていません。 だから私の質問は、この2つの技術の間に共通点（共通点）があるのか​​、それとも補完的なのか？...またはまったく違う？

113 javascript  rxjs  redux 

this.setState()reduxを使用するときに使用する必要がありますか？それとも、あなたは常に行動を派遣し、小道具に依存している必要がありますか？

111 reactjs  flux  redux 

休業。この質問には、より焦点を当てる必要があります。現在、回答を受け付けていません。 この質問を改善してみませんか？質問を更新して、この投稿を編集するだけで1つの問題に焦点を当てます。 2年前休業。 この質問を改善する React / Reduxは初めてです。ReduxアプリでフェッチAPIミドルウェアを使用してAPIを処理しています。（redux-api-middleware）です。これは非同期APIアクションを処理する良い方法だと思います。しかし、私は自分で解決できないいくつかのケースを見つけます。 ホームページ（Lifecycle）が言うように、フェッチAPIライフサイクルは、CALL_APIアクションのディスパッチで始まり、FSAアクションのディスパッチで終わります。 したがって、私の最初のケースは、APIをフェッチするときにプリローダーを表示/非表示にすることです。ミドルウェアは、最初にFSAアクションをディスパッチし、最後にFSAアクションをディスパッチします。両方のアクションは、一部の通常のデータ処理のみを実行するレデューサーによって受信されます。UI操作や操作はありません。多分私は状態で処理ステータスを保存し、ストアの更新時にそれらをレンダリングする必要があります。 しかし、これを行う方法は？ページ全体に反応するコンポーネントのフロー？他のアクションからストアを更新するとどうなりますか？つまり、州というよりイベントのようなものです。 さらに悪いケースとして、redux / reactアプリでネイティブの確認ダイアログまたはアラートダイアログを使用する必要がある場合はどうすればよいですか？それらはどこに置くべきですか、行動または減力剤？ ご多幸を祈る！返信をお願いします。

107 javascript  reactjs  redux 

接続する単純なReactコンポーネントがあります（単純な配列/状態をマッピングします）。ストアのコンテキストを参照しないようにするために、小道具から直接「ディスパッチ」を取得する方法が欲しいのですが。他の人がこのアプローチを使用しているのを見ましたが、何らかの理由でこれにアクセスできません:) これは私が現在使用している各npm依存関係のバージョンです "react": "0.14.3", "react-redux": "^4.0.0", "react-router": "1.0.1", "redux": "^3.0.4", "redux-thunk": "^1.0.2" これは、接続メソッドを持つコンポーネントです class Users extends React.Component { render() { const { people } = this.props; return ( <div> <div>{this.props.children}</div> <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button> </div> ); } }; function mapStateToProps(state) { return { people: …

107 javascript  reactjs  redux 

状態の再レンダリングによってUIの問題が発生する問題があり、ページの再レンダリングの量を減らすために、レデューサー内の特定の値のみを更新するように提案されました。 これは私の状態の例です { name: "some name", subtitle: "some subtitle", contents: [ {title: "some title", text: "some text"}, {title: "some other title", text: "some other text"} ] } 私は現在このように更新しています case 'SOME_ACTION': return { ...state, contents: action.payload } どこaction.payloadに新しい値を含む全体の配列です。しかし今、私は実際にはcontents配列の2番目のアイテムのテキストを更新する必要があるだけで、このようなものは機能しません case 'SOME_ACTION': return { ...state, contents[1].text: action.payload } action.payload更新に必要なテキストはどこにありますか。

105 javascript  reactjs  redux 

クライアント用に1つ、AppToolbar用に1つ、他にいくつかの減速機があります... ここで、クライアントを削除するフェッチアクションを作成したとしましょう。失敗した場合、Clientsレデューサーに何らかの処理を行うコードがありますが、AppToolbarにグローバルエラーを表示したいとします。 しかし、クライアントとAppToolbarレデューサーは状態の同じ部分を共有せず、レデューサーで新しいアクションを作成できません。 それでは、グローバルエラーを表示するにはどうすればよいですか？ありがとう 更新1： 私はeste devstack を使用していることを忘れています 更新2： 私はエリックの答えを正しいとマークしましたが、私がエステで使用している解決策は、エリックとダンの答えを組み合わせたものに似ていると言う必要があります...コードに最適なものを見つける必要があります。 。

105 javascript  reactjs  redux 

私はReact Routerを初めて使用し、ページをリダイレクトする方法が非常に多くあることを学びました。 使用する browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 使用する this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } React Router v4にはとがthis.context.history.push("/path")ありthis.props.history.push("/path")ます。詳細：React Router v4で履歴をプッシュする方法 これらすべてのオプションに混乱しているのですが、ページをリダイレクトする最善の方法はありますか？

102 reactjs  redux  react-router 

これは基本的な質問ですが、他の場所で答えを見つけることができませんでした。 あるstore.dispatch同期または非同期でRedux？ 非同期の場合、アクションが伝播された後にコールバックを追加する可能性がありReactますか？

100 javascript  reactjs  redux  single-page-application 

私が作成したコンポーネントがあります： class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: state.playlists } } export …

100 javascript  reactjs  redux 

配列ではなくオブジェクトで機能するReduxプロジェクトのディープコピーマップメソッドを作成しようとしています。Reduxでは、各状態は以前の状態で何も変更すべきではないことを読みました。 export const mapCopy = (object, callback) => { return Object.keys(object).reduce(function (output, key) { output[key] = callback.call(this, {...object[key]}); return output; }, {}); } できます： return mapCopy(state, e => { if (e.id === action.id) { e.title = 'new item'; } return e; }) ただし、内部アイテムはディープコピーされないため、次のように調整する必要があります。 export const mapCopy = (object, callback) => …

98 javascript  ecmascript-6  redux  spread-syntax 

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

95 redux  react-redux