无React DevTools时，如何在控制台获取Redux Store内容？

嘿，这个场景我太熟悉了！没装React DevTools的时候，确实得换点法子拿Redux Store，给你分享几个实用的方案：

方法1：直接把Store挂载到全局window对象 #

这是最简单直接的方式，在你创建Redux Store的代码里，把它赋值给window的一个属性就行：

// 你的Store创建代码
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

// 开发环境下挂载到全局
if (process.env.NODE_ENV === 'development') {
  window.myReduxStore = store;
}

之后打开浏览器控制台，直接输入myReduxStore.getState()就能拿到完整的Store状态了。

注意：记得只在开发环境这么做，生产环境千万别把Store暴露到全局，避免安全风险。

方法2：通过React组件的Context获取（适用于react-redux） #

如果你用了react-redux的Provider包裹根组件，也可以通过控制台从组件实例里挖出来：

1. 打开浏览器开发者工具的Elements面板，选中根组件（就是被Provider包裹的那个元素）
2. 切换到Console面板，输入以下代码（不同React版本可能内部属性名略有差异，比如有的是__reactFiber$开头的）：

// 获取Provider实例
const provider = $0._internalRoot.renderedNode.return.stateNode;
// 拿到Store并打印状态
console.log(provider.store.getState());

这个方法不用修改代码，适合临时调试，但缺点是依赖React内部的私有属性，版本更新后可能失效。

方法3：用自定义中间件暴露Store #

这种方式更优雅，不会直接污染全局，还能灵活控制：
写一个简单的中间件，在Store初始化时把它存到全局：

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

const exposeStoreMiddleware = store => next => action => {
  // 只在开发环境暴露
  if (process.env.NODE_ENV === 'development' && !window.__REDUX_STORE__) {
    window.__REDUX_STORE__ = store;
  }
  return next(action);
};

const store = createStore(
  rootReducer,
  applyMiddleware(exposeStoreMiddleware)
);

之后在控制台输入window.__REDUX_STORE__.getState()就能获取状态了。中间件还能扩展更多功能，比如监听action的同时方便调试。

方法4：Redux Toolkit的适配方案 #

如果你用的是Redux Toolkit，本质和上面的方法一样，在configureStore之后把Store挂载到全局，或者加入自定义中间件就行：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  // 可选：加入自定义中间件
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(exposeStoreMiddleware)
});

if (process.env.NODE_ENV === 'development') {
  window.store = store;
}

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