@liveblocks/redux

@liveblocks/redux provides you with Redux bindings for our realtime collaboration APIs, built on top of WebSockets. Read our getting started guides to learn more.

Enhancer

Enhancer that lets you connect a Redux state to Liveblocks Presence and Storage features.

import { liveblocksEnhancer } from "@liveblocks/redux";import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({  reducer: /* reducer */,  enhancers: (getDefaultEnhancers) =>    getDefaultEnhancers().concat(      liveblocksEnhancer({      client,      storageMapping: {},      presenceMapping: {},    })  ),});

Options

clientClient
The Liveblocks client instance created with createClient().
presenceMappingPresenceMapping
Optional mapping to synchronize Redux state with Liveblocks presence.
storageMappingStorageMapping
Optional mapping to synchronize Redux state with Storage.

client

See different authentication methods in the createClient method.

import { createClient } from "@liveblocks/client";import { liveblocksEnhancer } from "@liveblocks/redux";
const client = createClient({  authEndpoint: "/api/liveblocks-auth",});
const store = configureStore({  reducer: /* reducer */,  enhancers: (getDefaultEnhancers) =>    getDefaultEnhancers().concat(liveblocksEnhancer({ client })),});

presenceMapping

Mapping used to synchronize a part of your Redux state with one Liveblocks room presence.

import { liveblocksEnhancer } from "@liveblocks/redux";
const initialState = {  cursor: { x: 0, y: 0 },};
const slice = createSlice({  name: "state",  initialState,  reducers: {    /* reducers */  },});
const store = configureStore({  reducer: slice.reducer,  enhancers: (getDefaultEnhancers) =>    getDefaultEnhancers().concat(      liveblocksEnhancer({        client,        presenceMapping: { cursor: true },      })    ),});

storageMapping

Mapping used to synchronize a part of your Redux state with one Liveblocks Room storage.

import { liveblocksEnhancer } from "@liveblocks/redux";
const initialState = {  scientist: { name: "" },};
const slice = createSlice({  name: "state",  initialState,  reducers: {    /* reducers */  },});
const store = configureStore({  reducer: slice.reducer,  enhancers: (getDefaultEnhancers) =>    getDefaultEnhancers().concat(      liveblocksEnhancer({        client,        storageMapping: { scientist: true },      })    ),});

Actions

ENTER

Dispatch enterRoom action to enter a room and start syncing it with Redux state.

roomId: The room’s ID.

import { actions } from "@liveblocks/redux";import { useDispatch, useSelector } from "react-redux";
const dispatch = useDispatch();
dispatch(actions.enterRoom("roomId"));

Arguments

roomIdstring
The ID of the room to enter.
optionsobject
engine1 | 2
Preferred storage engine version to use when creating the room. Only takes effect if the room doesn't exist yet.

LEAVE

Dispatch leaveRoom action to leave the current room and stop syncing it with Redux state.

import { actions } from "@liveblocks/redux";import { useDispatch, useSelector } from "react-redux";
const dispatch = useDispatch();
dispatch(actions.leaveRoom());

Arguments

None

state.liveblocks

Liveblocks extra state attached by the enhancer.

others

Other users in the room. Empty when no room is currently synced.

const others = useSelector((state) => state.liveblocks.others);

isStorageLoading

Whether the room storage is currently loading.

const isStorageLoading = useSelector(  (state) => state.liveblocks.isStorageLoading);

status

Gets the current WebSocket connection status of the room.

const {  liveblocks: { status },} = useStore();

The possible values are: initial, connecting, connected, reconnecting, or disconnected.