nav

src/components/article/ArticleView.jsx

@@ -6,6 +6,7 @@ import {
   buildCategoryPath,
   defaultCategoryPath,
 } from '../../pages/artikel/categoryRoute';
+import articleAutomat, { createArticleSelector } from '../../store/articleAutomat';
 
 import ArticleTileTab from './ArticleTileTab';
 import ArticlePhotoTile from './ArticlePhotoTile';
@@ -24,34 +25,52 @@ class ArticleView extends PureComponent {
 
   constructor(props, context) {
     super(props, context);
-    const { article, unwatch } = context.article.watch(
-      props.sku,
-      (next) => {
-        this.setState({ article: next });
-      },
-    );
-    this.state = { article };
-    this.unwatchArticle = unwatch;
+    
+    const sku = props.sku;
+    const currentArticle = articleAutomat.state[sku] ?? null;
+    
+    this.state = { article: currentArticle };
     this.handleArticleDeleted = this.handleArticleDeleted.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { sku } = this.props;
-
-    if (prevProps.sku !== sku) {
-      this.unwatchArticle?.();
-      const { article: next, unwatch } = this.context.article.watch(
-        sku,
-        (updated) => this.setState({ article: updated }),
-      );
-      this.unwatchArticle = unwatch;
-      this.setState({ article: next });
+    
+    if (!currentArticle) {
+      articleAutomat.actions.loadArticle(sku).catch((err) => {
+        console.error('Failed to load article:', err);
+      });
     }
   }
 
+  componentDidMount() {
+    this.subscribeToArticle();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.sku !== this.props.sku) {
+      const currentArticle = articleAutomat.state[this.props.sku] ?? null;
+      this.setState({ article: currentArticle });
+      
+      if (!currentArticle) {
+        articleAutomat.actions.loadArticle(this.props.sku).catch((err) => {
+          console.error('Failed to load article:', err);
+        });
+      }
+      
+      this.subscribeToArticle();
+    }
+  }
+
+  subscribeToArticle() {
+    if (this.unsub) this.unsub();
+    const selector = createArticleSelector(this.props.sku);
+    this.unsub = articleAutomat.subscribe(this, (state) => ({
+      article: selector(state),
+    }));
+  }
+
   componentWillUnmount() {
-    this.unwatchArticle?.();
-    this.unwatchArticle = null;
+    if (this.unsub) {
+      this.unsub();
+      this.unsub = null;
+    }
   }
 
   handleArticleDeleted() {