Question

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

使用React Developer Tools，可以直接修改某些州的值。

Redux DevTools Extension中是否有类似的内容，即点击并插入特定属性的新值？

在this中，它表示可以随时改变你想要的东西，但是我找不到。

在州 - ＆gt;原始窗格（见下图）可以覆盖值，但似乎没有应用。

Answer 1

您可以使要分派操作的对象更新您的对象（或者您可以手动键入对象，以您较容易的方式为准），然后可以使用以下按钮Oracle Documentation直接从工具中进行新分派。

例如，如果您希望模拟服务器以不同的状态返回了对象，则只需分派用修改后的字段再次更新对象的操作。

Answer 2

Redux商店的一个主要原则是，每当调度一个动作时，它只能通过reducer函数进行更改。

因此我不认为，可以在Redux DevTools中更改存储状态，但至少可以计时或直接压制选定的操作（我经常做模拟，AJAX请求仍在等待中））。

如果您确实想要更改商店的状态，可以将商店（通过 <div class="culmn"> <nav class="navbar navbar-default bootsnav navbar-fixed"> <div class="navbar-top bg-grey fix"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-callus text-left sm-text-center"> <ul class="list-inline"> <li><a href="tel:123456789"><i class="fa fa-phone"></i>123456789</a></li>  </ul> </div> </div> <div class="col-md-6"> <div class="navbar-socail text-right sm-text-center"> <ul class="list-inline"> <li><a target="_blank" href="#"><i class="fa fa-facebook"></i></a></li> <li><a target="_blank" href="#"><i class="fa fa-twitter"></i></a></li> <li><a target="_blank" href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> </div> </div> </div>  <div class="top-search"> <div class="container"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span>  <input type="text" class="form-control" placeholder="Search"> <span class="input-group-addon close-search"><i class="fa fa-times"></i></span> </div> </div> </div>  <div class="container"> <div class="attr-nav"> <ul> <li class="search"><a href="#"><i class="fa fa-search"></i></a></li> </ul> </div> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> <div class="title">Logo</div> <div class="sub-title">Logo Sub</div> </a> </div> <div id="navbar2" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a></li> <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#features">Features</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown here</a> <ul class="dropdown-menu" role="menu"> <li><a href="one.html">One</a></li> <li><a href="two.html">Two</a></li> <li><a href="three.html">Three</a></li> <li><a href="four.html">Four</a></li> <li><a href="five.html">Five</a></li> <li><a href="six.html">Six</a></li> <li><a href="seven.html">Seven</a></li> <li><a href="eight.html">Eight</a></li> </ul> <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About Us</a></li> <li><a href="contact.html">Contact</a></li> </li> </ul> </div>  </div>  </nav> </div> 创建时）分配到createStore，然后直接从控制台拨打window._store

Answer 3

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

更改是通过纯函数进行的

要指定动作如何改变状态树，您可以编写纯约简器。

因此，您要进行状态更改的方法是定义一个特定的操作，该操作通过化简器更改所需的状态。

这有一个非常重要的原因-通过这种方式，您可以验证要测试的任何状态实际上是应用程序最终可能处于的状态。状态直接改变，您的应用程序可能永远无法达到该状态。

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

Answer 4

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

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

我将在3.0之后实现，届时将完成扩展的重写和新UI。除州外，计划还包括编辑已调度的动作，更改有效负载。而且，如果有兴趣，可以复制动作；因此，在编辑后，将有2个选项可以覆盖当前状态（并重新计算状态）或作为新动作进行分发。

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

修改Redux DevTools扩展中的状态

5 个答案: