web-dev-qa-db-ja.com

Redux DevTools Extensionで状態を変更する

アプリケーションの状態には、initialStateとして設定された値があります。

React Developer Tools を使用すると、状態値を直接変更するのが非常に簡単です。

Redux DevTools Extension でも同様のことは可能ですか？つまり、特定のプロパティをクリックして新しい値を挿入しますか？

this SO anwerには、「何でも好きなように変更する」ことが可能であると記載されていますが、その方法はわかりません。

[状態]-> [未加工]ペイン（下図を参照）では、値を上書きできますが、適用されていないようです。

enter image description here

reduxredux-devtoolsredux-devtools-extension
19
Fellow Stranger

オブジェクトを更新するアクションをディスパッチさせ（または、手動で入力することもできます）、次のボタンを使用して、ツールから直接ディスパッチすることができます enter image description here

たとえば、サーバーが別の状態のオブジェクトを返すのをシミュレートしたい場合は、変更されたフィールドを使用してオブジェクトを再度更新するアクションをディスパッチするだけです。

7
Vnvizitiu

Reduxストアの主な原則の1つは、アクションがディスパッチされるときは常に、レデューサー関数によってのみ変更できることです。

したがって、私は考えていません。ReduxDevToolsでストアの状態を変更することは可能ですが、少なくともタイムトラベルするか、選択したアクションを直接抑制することができます（私はシミュレーションでよく使用しますが、AJAXリクエスト保留中です）。

ストアの状態を本当に変更したい場合は、ストアを（createStoreで作成した場合）_window._store_に割り当て、コンソールから直接window._store.dispatch({type: "...", ...});を呼び出すことができます。 。

3
Michael Tamm

Redux Devtoolsの素晴らしい点は、Reduxの原則によく準拠していることです。状態を変更する唯一の方法は、actionを任意のカスタムパラメータとともにディスパッチし、レデューサに状態変更ロジックを処理させることです。これは推奨されるため、次のように 2番目の原則（状態は読み取り専用）およびReduxの3番目の原則 に従います。

変更は純粋な関数で行われます

アクションによる状態ツリーの変換方法を指定するには、純粋なレデューサーを記述します。

したがって、状態を変更する方法は、レデューサーを介して必要な状態を変更する特定のアクションを定義することです。

これには非常に重要な理由があります-この方法で、テストしようとしている状態が実際にアプリケーションが最終的に起こり得る状態であることを確認できます。状態のビットや断片を直接変更した場合、アプリケーションがその状態に到達しない可能性があります。

退屈に見えるかもしれませんが、これは、アプリケーションがヒットする可能性のある複雑な状態を試してテストしたい場合、その状態に到達するためにすべての正しいアクションをディスパッチする必要があることを意味しますが、少なくとも、それが可能な状態であることを知っています。アプリケーションが実行され、ユーザーがその状態に到達する方法がわかります。

0
aug

私は皆の反応に同意します。そしてこの能力がこの素晴らしい開発ツールのために計画されていると聞いてうれしいです。

アプリの設計中に、状態フラグメントをすばやく追加して、アプリをコンパイルできるようにします。これが、レデューサーの更新に使用するハックです。このアプローチでは、ストアが稼働している限り、アプリをコンパイルする必要はありません...とにかく動機の1つです。


// quick what to add the `selected` feature to my store; 
// the state store will update once I dispatch { type: 'HACK' }

export default createReducer(initialState, {
  HACK: state => ({
    ...state,
    selected: []
  }),
...
}
0
Edmund's Echo

いいえ-現在、手動で状態を変更することはできません。

Redux DevToolsリポジトリの this issue を参照してください。メンテナは最終的に機能を実装するつもりです：

拡張機能の書き換えと新しいUIが完了する3.0以降に実装します。状態に加えて、計画はディスパッチされたアクションを編集し、ペイロードを変更することでもあります。そして、興味があれば、アクションを複製します。そのため、編集後は、現在の状態を上書きする（および状態を再計算する）または新しいアクションとしてディスパッチする2つのオプションがあります。

0
Josh