If you are using Redux, you can use our middleware to sync state changes directly into your Redux store.

1

Import the middleware

To get started import the createLiveStateMiddleware middleware from the Velt SDK.

import { createLiveStateMiddleware } from "@veltdev/react";
2

Add the middleware to your Redux store configuration

Use createLiveStateMiddleware to create a middleware and a updateLiveStateDataId method.

Then add the created middleware to your Redux store configuration.

You can also export the updateLiveStateDataId method from your Redux store. This method will be used to dynamically set the liveStateDataId.

store.js:

import { configureStore } from "@reduxjs/toolkit";
import { createLiveStateMiddleware } from "@veltdev/react";

//create middleware
const { middleware, updateLiveStateDataId } = createLiveStateMiddleware();

//add middleware to your Redux store configuration
export const store = configureStore({
  reducer: {
	... your reducers here
  },
  // You just have to concat our liveStateMiddleware in store
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(middleware)
});

// optionally export updateLiveStateDataId method if you want to set liveStateDataId dynamically
export { updateLiveStateDataId };
3

Optional Configurations

createLiveStateMiddleware takes in an optional configuration object with the following schema:

type LiveStateMiddlewareConfig = {
    allowedActionTypes?: Set<string>,
    disabledActionTypes?: Set<string>,
    allowAction?: (action: any) => boolean,
    liveStateDataId?: string,
};

You can use it to define the following fields:

  • allowedActionTypes - allow live state syncing on specific action types only
  • disabledActionTypes - restrict live state syncing on specific action types
  • allowAction - custom callback method to dynamically decide to allow or disable syncing for that action. Return true to allow the action and false to restrict the action.
  • liveStateDataId - used to set a custom string value as live state data key. If not provided, we will store data in default key.

Example:

const { middleware, updateLiveStateDataId } = createLiveStateMiddleware({
	allowedActionTypes: new Set(['action1', 'action2']),
	disabledActionTypes: new Set(['disabledAction1', 'disabledAction2']),
	allowAction: (action) => {
		// return true to allow this action, false to restrict this action from syncing
    },
    liveStateDataId: 'custom-live-state-data-id'
});

It is recommended to first set a custom liveStateDataId in the middleware configuration. You can then change it dynamically later using the updateLiveStateDataId method.

To set liveStateDataId dynamically, call the updateLiveStateDataId method that was previously created and exported from your store.

import { updateLiveStateDataId } from 'path-to-store.js';

function YourComponent() {
	
	// You can update liveStateDataId any time based on your requirements and all the actions called after that will be synced on new ID path.
	const setLiveStateDataId = (id) => {
		updateLiveStateDataId(id);
    }

	return (
        <div>Your HTML Template</div>
    );
}

Was this page helpful?

SetupOverview