Redux integration

CodeBud.createReduxStoreChangeHandler

This method allows you to check Redux state data on the Redux tab in GUI.

CodeBud.createReduxStoreChangeHandler takes 2 (3) args:

store - your redux store
selectFn - select function that takes store and returns some part of it
[optional] batchingTimeMs - batching time of sending new redux state copy (in ms). Defaults to 500. Smaller value gives you smaller delay, but slower performance. It is not recommended to pass value smaller than 100

// Your redux store
export const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware(),
  enhancers: getDefaultEnhancers(),
});

CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS);

// Select function is used to determine part of the redux state that will be visible for codebud.
// If you want to be able to see whole state, just return state from this function.
function select(state: any) {
  return state.user;
}

// Here we are subscribing for redux state changes.
// Later you can call unsubscribeCodeBudFromReduxStoreChanges in order to unsubscribe (this is optional)
// batchingTimeMs is not passed so it will be 500ms by default
const unsubscribeCodeBudFromReduxStoreChanges = store.subscribe(
  CodeBud.createReduxStoreChangeHandler(store, select)
);

That's it. Now you should be able to check redux state data on the Redux tab in GUI.

It is not necessary to init CodeBud in the same file, where you are creating your redux store. You can just import store into the file containing codebud initiation, or you can create a function for codebud initiation and pass redux store as one of its params.

CodeBud.createReduxActionMonitorMiddleware

This method allows you to monitor dispatched actions on the Network tab in GUI.

function getDefaultMiddleware() {
  const middleware = [];
  // Adding CodeBud reduxActionMonitor as middleware
  middleware.push(CodeBud.createReduxActionMonitorMiddleware(
    200, // [optional] batchingTimeMs
    [/^user\/updateToDo$/] // [optional] ignoredPatterns
  ));
  return middleware;
} // If you are creating middleware in a different way, just push CodeBud.createReduxActionMonitorMiddleware() in your middleware array.

// Your redux store
export const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware(),
  enhancers: getDefaultEnhancers(),
});

That's it. Now you should be able to check dispatched actions on the Network tab in GUI.

Function for CodeBud initiation

It might be helpful to move CodeBud initiation code to separated file and use it as function.
Here is an example (feel free to adjust it for your purposes)

File codebudConfig.ts

import { CodeBud, Instruction } from '@appklaar/codebud';

export const setup = (store: any) => {
  console.log("Setting up @appklaar/codebud");

  // Declare array of instructions
  const INSTRUCTIONS: Instruction[] = [
    {
      id: "login",
      prototype: "login",
      description: 'User login',
      handler: () => {
        console.log("Login event...");
      }
    },
    {
      id: "logout",
      prototype: "logout",
      description: "Logout user",
      handler: () => {
        console.log("Logout event...");
      }
    },
    {
      id: "helloWorld",
      handler: () => {
        console.log('Hello, world!');
      }
    },
    {
      id: "sayHi",
      description: `Say "Hi!" to someone. Has 1 parameter - name to greet`,
      parametersDescription: {
        name: "string"
      },
      handler: (data: {name: string}) => {
        const greeting = `Hi, ${data.name}!`;
        console.log(greeting);
        return {greeting: greeting};
      }
    },
  ];
  
  // Call the init method.
  CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS);

  // Check package state (optionaly)
  console.log('CodeBud init:', CodeBud.isInit);
  console.log('CodeBud state:', CodeBud.state);

  function select(state: any) {
    return state;
  }
  
  const unsubscribeCodeBudFromStoreChanges = store.subscribe(
    CodeBud.createReduxStoreChangeHandler(store, select)
  );
};

File store.ts (or any other file where you have access to your redux store)

// Make sure that path for codebudConfig file is correct
// You can use import syntax if you prefer, but with require syntax you can make CodeBud initiation conditional using if() statement
const codebud = require('./../codebudConfig');
codebud.setup(store);