44

在我的应用程序状态中，有一些值设置为 initialState。

使用React 开发者工具可以很容易地直接修改一些状态值。

Redux DevTools Extension中是否有类似的可能，即单击并为特定属性插入新值？

在这个SO anwer 中，它声明可以“改变任何你想要的”，但我找不到如何。

在“状态”->“原始”窗格（见下图）中，可以覆盖值，但似乎没有应用。

在此处输入图像描述

4

7 回答 7

44

您可以触发一个更新您的对象的操作（或者您可以手动键入它，这对您来说更容易），然后您可以使用以下按钮直接从该工具触发一个新的调度

Redux 工具截图

例如，如果您希望模拟服务器返回处于不同状态的对象，只需调度使用修改后的字段再次更新对象的操作。

于 2018-08-29T10:57:00.173 回答
7

否 - 目前无法手动修改状态。

在 Redux DevTools 存储库中查看此问题；维护者确实打算最终实现该功能：

我会在3.0之后实现，什么时候完成扩展的重写和新的UI。除了状态之外，该计划还包括编辑已调度的操作，更改有效负载。并且，如果有兴趣，重复操作；因此，在编辑后将有 2 个选项来覆盖当前选项（并重新计算状态）或作为新操作调度。

于 2019-08-29T13:58:36.467 回答
6

Redux store 的主要原则之一是，它只能通过 reducer 函数来更改，无论何时调度一个动作。

因此，我不认为可以在 Redux DevTools 中更改存储状态，但至少您可以进行时间旅行或直接抑制选定的操作（我经常这样做以模拟 AJAX 请求仍处于未决状态）。

如果您真的想更改商店的状态，可以将商店（通过 创建时createStore）分配给window._store然后window._store.dispatch({type: "...", ...});直接从控制台调用。

于 2018-02-24T12:22:21.103 回答
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: []
  }),
...
}
于 2019-09-07T22:51:57.943 回答
0

如果状态被持久化，那么您可以编辑本地存储 (persist:root) 并刷新页面。

在此处输入图像描述

于 2021-10-23T12:30:17.437 回答
0

对的，这是可能的。

步骤 1. 单击调度程序。

第 2 步：现在提供您要修改的“操作类型”。

第 3 步：创建一个有效负载对象并修改您要修改的状态。

第四步：最后点击“派送”。

这将调度具有修改状态的操作。

在此处输入图像描述

于 2021-10-22T15:35:48.553 回答
-5

Redux Devtools 的伟大之处在于它很好地遵循了 Redux 的原则。您应该更改状态的唯一方法是action使用您想要的任何自定义参数调度 an，然后让 reducer 处理状态更改逻辑。这是首选，因此它遵循第二个原则（状态是只读的）和 Redux 的第三个原则，其中指出：

使用纯函数进行更改

要指定状态树如何通过操作进行转换，您可以编写纯 reducer。

因此，您进行状态更改的方式是定义一个特定的操作，通过 reducer 更改您想要的状态。

这有一个非常重要的原因——通过这种方式，您可以验证您尝试测试的任何状态实际上是您的应用程序最终可能进入的状态。如果您直接改变状态的点点滴滴，那么您的应用程序可能可能永远也达不到那个状态。

这可能看起来很乏味，但这意味着如果您想尝试测试应用程序可能遇到的复杂状态，您必须调度所有正确的操作才能到达该状态，但至少您知道这是一种可能的状态您的应用程序将遇到以及您的用户如何达到该状态。

于 2018-07-26T20:23:18.233 回答