diff --git a/packages/editor/src/components/DataSource/ApiForm/ApiForm.tsx b/packages/editor/src/components/DataSource/ApiForm/ApiForm.tsx
index 80718e92..7b98292f 100644
--- a/packages/editor/src/components/DataSource/ApiForm/ApiForm.tsx
+++ b/packages/editor/src/components/DataSource/ApiForm/ApiForm.tsx
@@ -195,7 +195,7 @@ export const ApiForm: React.FC<Props> = props => {
         )}
         <CloseButton
           onClick={() => {
-            editorStore.setActiveDataSource(null);
+            editorStore.setActiveDataSourceId(null);
           }}
         />
       </HStack>
diff --git a/packages/editor/src/components/DataSource/Data.tsx b/packages/editor/src/components/DataSource/Data.tsx
index ff8b66d7..1587632c 100644
--- a/packages/editor/src/components/DataSource/Data.tsx
+++ b/packages/editor/src/components/DataSource/Data.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import {
   Box,
   Text,
@@ -11,6 +11,7 @@ import {
 import { DataSourceItem } from './DataSourceItem';
 import { EditorServices } from '../../types';
 import { ComponentSchema } from '@sunmao-ui/core';
+import { watch } from '@sunmao-ui/runtime';
 
 interface Props {
   datas: ComponentSchema[];
@@ -33,7 +34,6 @@ const STATE_MAP: Record<string, string> = {
 };
 
 export const Data: React.FC<Props> = props => {
-  const [search, setSearch] = useState('');
   const {
     datas = [],
     active,
@@ -46,10 +46,20 @@ export const Data: React.FC<Props> = props => {
   } = props;
   const { stateManager } = services;
   const { store } = stateManager;
+  const [search, setSearch] = useState('');
+  const [reactiveStore, setReactiveStore] = useState<Record<string, any>>({...store});
   const list = useMemo(
     () => datas.filter(({ id }) => id.includes(search)),
     [search, datas]
   );
+
+  useEffect(() => {
+    const stop = watch(store, newValue => {
+      setReactiveStore({ ...newValue });
+    });
+
+    return stop;
+  }, [store]);
   
   const StateItems = () => (
     <>
@@ -59,9 +69,9 @@ export const Data: React.FC<Props> = props => {
             key={state.id}
             dataSource={state}
             tag={
-              Array.isArray(store[state.id]?.value)
+              Array.isArray(reactiveStore[state.id]?.value)
                 ? 'Array'
-                : STATE_MAP[typeof store[state.id]?.value] ?? 'Any'
+                : STATE_MAP[typeof reactiveStore[state.id]?.value] ?? 'Any'
             }
             name={state.id}
             active={active === state.id}
diff --git a/packages/editor/src/components/DataSource/DataSource.tsx b/packages/editor/src/components/DataSource/DataSource.tsx
index b68ad0be..ead740a6 100644
--- a/packages/editor/src/components/DataSource/DataSource.tsx
+++ b/packages/editor/src/components/DataSource/DataSource.tsx
@@ -17,7 +17,7 @@ import { Api } from './Api';
 import { Data } from './Data';
 import { EditorServices } from '../../types';
 import { ToolMenuTabs } from '../../constants/enum';
-import { DataSourceType, DATASOURCE_TRAIT_TYPE_MAP } from '../../constants/dataSource';
+import { DataSourceType, DATA_DATASOURCES } from '../../constants/dataSource';
 
 interface Props {
   active: string;
@@ -29,29 +29,11 @@ const DATASOURCE_TYPES = Object.values(DataSourceType);
 export const DataSource: React.FC<Props> = props => {
   const { active, services } = props;
   const { editorStore } = services;
-  const NORMAL_DATASOURCES = [
-    {
-      title: DataSourceType.STATE,
-      traitType: DATASOURCE_TRAIT_TYPE_MAP[DataSourceType.STATE],
-      filterPlaceholder: 'filter the states',
-      emptyPlaceholder: 'No States.',
-      datas: editorStore.dataSources[DataSourceType.STATE],
-    },
-    {
-      title: DataSourceType.LOCALSTORAGE,
-      traitType: DATASOURCE_TRAIT_TYPE_MAP[DataSourceType.LOCALSTORAGE],
-      filterPlaceholder: 'filter the localStorages',
-      emptyPlaceholder: 'No LocalStorages.',
-      datas: editorStore.dataSources[DataSourceType.LOCALSTORAGE],
-    },
-    {
-      title: DataSourceType.TRANSFORMER,
-      traitType: DATASOURCE_TRAIT_TYPE_MAP[DataSourceType.TRANSFORMER],
-      filterPlaceholder: 'filter the transformers',
-      emptyPlaceholder: 'No Transformers.',
-      datas: editorStore.dataSources[DataSourceType.TRANSFORMER],
-    },
-  ];
+  const NORMAL_DATASOURCES = DATA_DATASOURCES.map((item)=> ({
+    ...item,
+    title: item.type,
+    datas: editorStore.dataSources[item.type],
+  }));
   const onMenuItemClick = (type: DataSourceType) => {
     editorStore.createDataSource(
       type,
@@ -60,11 +42,11 @@ export const DataSource: React.FC<Props> = props => {
     editorStore.setSelectedComponentId('');
   };
   const onApiItemClick = (api: ComponentSchema) => {
-    editorStore.setActiveDataSource(api);
+    editorStore.setActiveDataSourceId(api.id);
     editorStore.setSelectedComponentId('');
   };
   const onDataSourceItemClick = (dataSource: ComponentSchema) => {
-    editorStore.setActiveDataSource(dataSource);
+    editorStore.setActiveDataSourceId(dataSource.id);
     editorStore.setToolMenuTab(ToolMenuTabs.INSPECT);
     editorStore.setSelectedComponentId('');
   };
diff --git a/packages/editor/src/services/EditorStore.ts b/packages/editor/src/services/EditorStore.ts
index c4155324..9305f622 100644
--- a/packages/editor/src/services/EditorStore.ts
+++ b/packages/editor/src/services/EditorStore.ts
@@ -43,7 +43,7 @@ export class EditorStore {
   schemaValidator: SchemaValidator;
 
   // data source
-  activeDataSource: ComponentSchema | null = null;
+  activeDataSourceId: string | null = null;
 
   constructor(
     private eventBus: EventBusType,
@@ -90,7 +90,7 @@ export class EditorStore {
       () => {
         if (this.selectedComponentId) {
           this.setToolMenuTab(ToolMenuTabs.INSPECT);
-          this.setActiveDataSource(null);
+          this.setActiveDataSourceId(null);
         }
       }
     );
@@ -169,6 +169,10 @@ export class EditorStore {
     return dataSources;
   }
 
+  get activeDataSource(): ComponentSchema | null {
+    return this.components.find((component)=> component.id === this.activeDataSourceId) || null;
+  }
+
   get activeDataSourceType(): DataSourceType | null {
     for (const trait of this.activeDataSource?.traits || []) {
       const [dataSourceType] =
@@ -238,8 +242,8 @@ export class EditorStore {
     this.lastSavedComponentsVersion = val;
   };
 
-  setActiveDataSource = (dataSource: ComponentSchema | null) => {
-    this.activeDataSource = dataSource;
+  setActiveDataSourceId = (dataSourceId: string | null) => {
+    this.activeDataSourceId = dataSourceId;
   };
 
   createDataSource = (
@@ -277,7 +281,7 @@ export class EditorStore {
 
     const component = this.components.find(({ id: componentId }) => id === componentId);
 
-    this.setActiveDataSource(component!);
+    this.setActiveDataSourceId(component!.id);
 
     if (type === DataSourceType.STATE || type === DataSourceType.LOCALSTORAGE) {
       this.setToolMenuTab(ToolMenuTabs.INSPECT);
@@ -292,7 +296,7 @@ export class EditorStore {
       })
     );
     if (this.activeDataSource?.id === dataSource.id) {
-      this.setActiveDataSource(null);
+      this.setActiveDataSourceId(null);
     }
   };
 
@@ -307,7 +311,7 @@ export class EditorStore {
 
     const component = this.components.find(({ id: componentId }) => componentId === name);
 
-    this.setActiveDataSource(component!);
+    this.setActiveDataSourceId(component!.id);
   };
 
   setExplorerMenuTab = (val: ExplorerMenuTabs) => {