Redux开发者工具中Store标识名设置位置及多Store命名方案

1. 单个Store的名称设置位置 #

创建Redux Store时，通过composeWithDevTools（或Redux Toolkit的configureStore）的配置项指定name字段即可设置Store名称。

传统Redux写法： #

import { createStore } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  composeWithDevTools({
    name: '主应用Store' // 此处设置Store标识名称
  })
);

Redux Toolkit写法： #

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

const store = configureStore({
  reducer: rootReducer,
  devTools: {
    name: '主应用Store'
  }
});

2. 多Store场景的名称区分方案 #

如果存在多个Store，只需要给每个Store在创建时配置唯一的name值，Redux开发者工具的顶部箭头选择器就会显示所有Store的名称，方便快速切换区分。

示例（两个独立Store）：

// 用户模块Store
const userStore = configureStore({
  reducer: userReducer,
  devTools: {
    name: '用户管理Store'
  }
});

// 购物车模块Store
const cartStore = configureStore({
  reducer: cartReducer,
  devTools: {
    name: '购物车Store'
  }
});

配置完成后，打开Redux开发者工具即可看到如下选择界面：

内容的提问来源于stack exchange，提问作者Lester Arévalo