如何在Redux DevTools自动追踪最新Action？找不到锁定最新状态按钮

嘿，我之前也被这个问题困扰过——调试的时候切到旧Action看状态，结果新Action发了之后还停留在旧状态，得手动切回去，太麻烦了！下面给你两种解决思路，不管是代码配置还是界面操作都能搞定：

一、通过代码配置默认开启自动追踪 #

如果你想一开始就让DevTools自动追踪最新Action，可以在创建Redux Store的时候，给DevTools扩展传对应的配置参数：

import { createStore, compose } from 'redux';
import yourRootReducer from './path/to/rootReducer';

// 拿到DevTools的增强器
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  yourRootReducer,
  composeEnhancers({
    // 自动记录所有Action的变化
    shouldRecordChanges: true,
    // 新Action分发时自动滚动到最新条目
    autoScrollToTop: true,
    // 核心：锁定到最新状态，新Action一来就自动切换过去
    lock: true
  })
);

这样配置后，DevTools一打开就会自动跟住最新的Action，不用手动操作。

二、在DevTools界面手动开启锁定 #

如果不想改代码，直接在DevTools面板里操作就行：

• 打开Redux DevTools面板（通常在浏览器开发者工具的「Redux」标签页）
• 找到顶部控制栏里的🔒 Lock to latest按钮（和播放、暂停这些时间旅行按钮在一起，hover的时候会显示tooltip）
• 点击这个按钮后，不管你之前查看了哪个历史Action，只要有新的Action分发，面板就会自动切换到最新的状态，再也不用手动切回去了！

这个按钮很容易被忽略，我当初找了好久才发现它藏在那一排控制按钮里😂

内容的提问来源于stack exchange，提问作者Eduard