Merge pull request #10 from flow-build/bugfix/remove-duplicate-set-state

Bugfix/remove duplicate set state

Author: wallace-sf

app/examples/Basic/Child.tsx

@@ -1,19 +1,34 @@
 import * as React from 'react';
 
-import { useMqtt, useSubscribe } from '../../../dist';
+import { useMqtt, useSubscribe, useUnsubscribe } from '../../../dist';
 import { processTopic, actorTopic } from './constants';
 
+const topics = [processTopic, actorTopic];
+
 export const Child: React.FC = () => {
   const { status, error } = useMqtt();
   const subscribe = useSubscribe();
+  const unsubscribe = useUnsubscribe();
+
+  const handleSubscribe = React.useCallback(() => {
+    if (status === 'connected') subscribe(topics);
+  }, [status, subscribe]);
 
-  React.useEffect(() => {
-    if (status === 'connected') subscribe([processTopic, actorTopic]);
-  }, [subscribe, status]);
+  const handleUnsubscribe = React.useCallback(() => {
+    if (status === 'connected') unsubscribe(topics);
+  }, [status, unsubscribe]);
 
   return (
     <main>
       <h1>This is a basic example</h1>
+      <h2>Topics</h2>
+      <p>{topics.join(', ')}</p>
+      <button type="button" onClick={handleSubscribe}>
+        Inscrever-se nos tópicos
+      </button>
+      <button type="button" onClick={handleUnsubscribe}>
+        Desinscrever-se dos tópicos
+      </button>
       <p>
         <b>Mqtt status: </b>
         {status}

app/examples/Basic/store.ts

@@ -1,15 +1,6 @@
-import { configureStore, createSlice, Middleware } from '@reduxjs/toolkit';
+import { configureStore, createSlice } from '@reduxjs/toolkit';
 
-import { workflowManagerReducer, WorkflowManagerConfig } from '../../../dist';
-import { processTopic, actorTopic } from './constants';
-
-const middleware: Middleware = () => (next) => (action) => {
-  next(action);
-
-  if (action.type === '@@workflowManager/external/TEST_WORKFLOW') {
-    WorkflowManagerConfig.unsubscribe([processTopic, actorTopic]);
-  }
-};
+import { workflowManagerReducer } from '../../../dist';
 
 const basicSlice = createSlice({
   name: '@basic',
@@ -20,5 +11,4 @@ const basicSlice = createSlice({
 export const store = configureStore({
   reducer: { workflowManagerReducer, basic: basicSlice.reducer },
   devTools: process.env.NODE_ENV !== 'production',
-  middleware: [middleware],
 });