Redux Middleware
If you are using Redux, you can use our middleware to sync state changes directly into your Redux store.
Import the middleware
To get started import the createLiveStateMiddleware
middleware from the Velt SDK.
import { createLiveStateMiddleware } from "@veltdev/react";
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 };
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 onlydisabledActionTypes
- restrict live state syncing on specific action typesallowAction
- custom callback method to dynamically decide to allow or disable syncing for that action. Returntrue
to allow the action andfalse
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>
);
}