在 Redux DevTools Extension 中修改状态答案

【问题标题】：Modify state in Redux DevTools Extension在 Redux DevTools Extension 中修改状态
【发布时间】：2018-05-31 08:16:30
【问题描述】：

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

使用React Developer Tools 可以很容易地直接修改一些状态值。

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

在this SO anwer 中声明可以“改变任何你想要的”，但我找不到方法。

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

【问题讨论】：

这不完全是你想要的，但你可以导出状态，改变它然后再次导入。（但导入不会立即更新状态，如此处所述github.com/zalmoxisus/redux-devtools-extension/issues/284）
与导出/导入类似的 hack。当用户关闭浏览器选项卡时，我使用 localstorage 来保持状态。所以我可以转到 devtools 的 Application 选项卡，直接在 localstorage 中编辑，然后关闭并打开选项卡，我的应用程序会从 localstorage 中自行补充并更新状态。

标签： redux redux-devtools redux-devtools-extension

【解决方案1】：

Redux 存储的主要原则之一是，它只能由 reducer 函数在分派操作时更改。

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

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

【讨论】：

【解决方案2】：

Redux Devtools 的伟大之处在于它很好地遵守了 Redux 的原则。您应该更改状态的唯一方法是使用您想要的任何自定义参数调度action，然后让reducer 处理状态更改逻辑。这是首选，因此它遵守 second principle (state is read-only) and the third principle of Redux 声明：

使用纯函数进行更改

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

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

这是一个非常重要的原因 - 这样您可以验证您尝试测试的任何状态实际上是您的应用程序最终可能进入的状态。如果您改变了位并且部分状态，您的应用程序可能永远不会达到该状态。

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

【讨论】：

Redux-devtools-extension 是一个开发工具。开发工具的目的是通过允许具有应用程序上下文的工程师深入了解并快速检查或修改事物来加快开发过程。我将它与 Chrome Devtools 的功能进行了比较，这些功能允许您“以 HTML 格式编辑”DOM 节点或修改 CSS 参数。或者 Redux Devtools 的功能，它允许您通过选中/关闭复选框来更改状态中的布尔值。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

查看 Redux DevTools 存储库中的 this issue；维护者确实打算最终实现该功能：

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

【讨论】：

【解决方案5】：

我同意每个人的回应并且很高兴听到这个出色的开发工具计划了这个容量。

在应用程序的设计过程中，最好快速添加一个状态片段以使应用程序编译...继续进行。这是我用来更新减速器的技巧。只要商店正在运行，该方法就不需要编译应用程序......因此无论如何都是动机之一。


// 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: []
  }),
...
}

【讨论】：

【解决方案6】：

是的，有可能。

第 1 步。点击 Dispatcher。

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

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

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

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

【讨论】：

【解决方案7】：

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

【讨论】：