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

ステートシェイプの設計に関する章のドキュメントでは、IDでキー設定されたオブジェクトに状態を保持することを推奨しています。 IDをキーとして格納されたオブジェクト内のすべてのエンティティを保持し、IDを使用して他のエンティティまたはリストからそれを参照します。 彼らは州に行く アプリの状態をデータベースと考えてください。 フィルターのリストの状態図形を処理しています。フィルターの一部は開かれる（ポップアップに表示される）か、オプションが選択されます。「アプリの状態をデータベースと考える」を読んだとき、APIから返される（データベースによってサポートされている）JSON応答として考えることを考えました。 だから私はそれを次のように考えていました [{ id: '1', name: 'View', open: false, options: ['10', '11', '12', '13'], selectedOption: ['10'], parent: null, }, { id: '10', name: 'Time & Fees', open: false, options: ['20', '21', '22', '23', '24'], selectedOption: null, parent: '1', }] ただし、ドキュメントはより多くのような形式を提案しています { 1: { name: 'View', open: …

94 javascript  redux  spread-syntax 

プレゼンテーションコンポーネントをコンテナコンポーネントから分離しようとしています。私はとを持って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 

私は中程度の複雑さの1つのフロントエンドアプリケーションの調査に取り組んでいます。現時点では、純粋なJavaScriptで記述されており、このアプリケーションのいくつかの主要部分を接続するさまざまなイベントベースのメッセージがあります。 さらにリファクタリングの範囲で、このアプリケーションに何らかの状態コンテナを実装する必要があると判断しました。以前、私はreduxとngrxストア（実際には同じ原則に従います）の経験がありました。 Reduxは私たちのオプションですが、開発者の1人がステートマシンベースのライブラリ、特にxstateライブラリの使用を提案しました。 私はxstateを使ったことがないので、xstateが面白いと感じ、ドキュメントを読み、さまざまな例を調べ始めました。有望で強力に見えましたが、ある時点で、それとreduxの間に大きな違いは見られないことがわかりました。 私は何時間もかけて答えや、xstateとreduxを比較するその他の情報を見つけようとしました。「reduxからステートマシンに移行する」などの記事や、reduxとxstateを一緒に使用することに焦点を当てたライブラリへのリンク（かなり奇妙な）を除いて、明確な情報は見つかりませんでした。 誰かが違いを説明したり、開発者がいつxstateを選択すべきかを教えてくれれば、大歓迎です。

93 javascript  redux  state-machine  xstate 

私はReactでプロジェクトに取り組んでいて、困った問題に遭遇しました。 実行するたびにyarn start次のエラーが発生します。 TypeError [ERR_INVALID_ARG_TYPE]：「パス」引数は文字列型でなければなりません。未定義の受信タイプ なぜこれが起こっているのか私にはわかりません。誰かがこれを経験したことがあれば、感謝します。

92 javascript  reactjs  redux  visual-studio-code  yarnpkg 

redux-thunkは、間違っている場合は私が知り、修正する限り、非同期関数をディスパッチし、アクション自体の値をデバッグするのに役立つミドルウェアですが、redux-promiseを使用すると、独自の関数を実装しないと非同期関数を作成できませんでしたアクションとしてのメカニズムは、プレーンオブジェクトのみをディスパッチするという例外をスローします。 これら2つのパッケージの主な違いは何ですか？単一のページ反応アプリで両方のパッケージを使用するメリットや、redux-thunkに固執することで十分なメリットはありますか？

92 reactjs  redux  redux-thunk  redux-promise 

私はそれを理解しようとするために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 

Reduxドキュメントの最初の原則は次のとおりです。 アプリケーション全体の状態は、単一のストア内のオブジェクトツリーに保存されます。 そして、私は実際に私がすべての校長をよく理解していると思いました。しかし、私は今、アプリケーションが何を意味するのか混乱しています。 アプリケーションがウェブサイトの少し複雑な部分の1つにすぎず、1ページで機能する場合、私は理解しています。しかし、アプリケーションがWebサイト全体を意味する場合はどうでしょうか。状態ツリーを維持するためにLocalStorageやCookieなどを使用する必要がありますか？しかし、ブラウザがLocalStorageをサポートしていない場合はどうなりますか？ 開発者がどのように状態ツリーを保持しているか知りたいです！:)

92 reactjs  redux  flux 

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 

Typescript、React、Redux（すべてElectronで実行）を使用するプロジェクトに取り組んでいますが、あるクラスベースのコンポーネントを別のコンポーネントに含めて、それらの間でパラメーターを渡そうとすると、問題が発生します。大まかに言えば、コンテナコンポーネントには次の構造があります。 class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); そして子コンポーネント： interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, any> { ... } .... export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 明らかに、私は基本的なものだけを含めており、これらのクラスにはさらに多くのものがありますが、有効なコードのように見えるものを実行しようとすると、まだエラーが発生します。私が得ている正確なエラー： …

91 reactjs  typescript  redux  electron  jsx 

のユニットテストがありますreducers。ただし、ブラウザーでデバッグしているときに、アクションが正しく呼び出されているかどうか、およびそれに応じて状態が変更されているかどうかを確認したいと思います。 私は次のようなものを探しています： window._redux.store ...ブラウザで入力して、コンソールで入力し、状況を確認できます。 どうすればそれを達成できますか？

91 javascript  reactjs  redux 

簡単な切り替えがあるとしましょう： ボタンをクリックすると、色コンポーネントが赤と青の間で変化します 私はこのようなことをすることによってこの結果を達成するかもしれません。 index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} しかし、これは、jQuery、いくつかのクラス、および一部のcssを使用して5秒で達成できた何かのために作成する多くのコードの地獄です... だから私が本当に求めていることは、ここで何が間違っているのでしょうか？

89 javascript  reactjs  redux 

私は通常、スタックにコード関連のものを投稿しますが、これはコミュニティの一般的な考えについての質問です。 データ/状態を管理するためにReactでReduxを使用することを主張する人はたくさんいるようですが、両方を読んで学習しているときに、見た目がよくないものに遭遇しました。 戻ってきた このページの下部：http : //redux.js.org/docs/basics/UsageWithReact.html（ストアを渡す）では、React 'Context'の "Magic"を使用することをお勧めします。 1つのオプションは、それを小道具としてすべてのコンテナーコンポーネントに渡すことです。ただし、コンポーネントがコンポーネントツリーの深いところにコンテナをレンダリングするだけで、プレゼンテーションコンポーネントを介してストアをワイヤリングする必要があるので、面倒です。 私たちが推奨するオプションは、すべてのコンテナーコンポーネントがストアを魔法のように利用できるようにするために呼び出される特別なReact Reduxコンポーネントを使用することです... 反応する React Contextページ（https://facebook.github.io/react/docs/context.html）の上部に警告があります。 コンテキストは高度で実験的な機能です。APIは将来のリリースで変更される可能性があります。 次に下部に： 明確なコードを書くときにグローバル変数を回避するのが最善であるのと同じように、ほとんどの場合、コンテキストの使用を避けるべきです... コンポーネントを介してモデルデータを渡すためにコンテキストを使用しないでください。ツリーを介してデータを明示的にスレッド化することは、理解がはるかに簡単です... そう... Reduxでは、store「props」を介して各コンポーネントに「」を渡すのではなく、Reactの「コンテキスト」機能を使用することをお勧めします。Reactは反対を推奨しますが。 また、Dan Abramov（Reduxの作成者）がFacebook（Reactの作成者）で働いているようです。 私はこのすべてを正しく読んでいますか？ この問題に関する現在の一般的なコンセンサスは何ですか？

88 javascript  reactjs  redux 

私は次の構文で問題を理解するのに苦労しています： export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } }; 私は次のようにエラーを受け取り続けます： awaitは予約語です ...しかし、非同期関数内では合法ではありませんか？ ディスパッチビットはreact-thunkライブラリから来ています。

88 javascript  reactjs  async-await  redux 

レデューサーがあります。新しい状態を計算するには、アクションからのデータと、このレデューサーによって管理されていない状態の一部からのデータが必要です。具体的には、以下に示すレデューサーで、accountDetails.stateOfResidenceIdフィールドにアクセスする必要があります。 initialState.js： export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' }, forms: { blueprints: [ ] } }; formsReducer.js： import * as types from '../constants/actionTypes'; import objectAssign from 'object-assign'; import initialState from './initialState'; import formsHelper from '../utils/FormsHelper'; export default function formsReducer(state = initialState.forms, action) { …

88 javascript  reactjs  redux 

サーバーからトークン認証を取得しているので、Reduxアプリが最初に読み込まれたときに、このサーバーにリクエストを送信して、ユーザーが認証されているかどうかを確認する必要があります。認証されている場合は、トークンを取得する必要があります。 ReduxコアのINITアクションの使用は推奨されていないことがわかりました。アプリがレンダリングされる前に、アクションをディスパッチするにはどうすればよいですか？

88 reactjs  redux