API Reference - @liveblocks/redux

@liveblocks/redux provides you with Redux bindings for our real-time 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: [ liveblocksEnhancer({ client, storageMapping: {}, presenceMapping: {}, }), ],});

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: [ 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: [ 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: [ liveblocksEnhancer({ client, storageMapping: { scientist: true }, }), ],});

Actions

ENTER

Dispatch enterRoom action to enter a room and start sync 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"));

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());

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 or not the room storage is currently loading.

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

status

Gets the current WebSocket connection status of the room.

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

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

connectionLegacy

Legacy connection status of the room. This property exists for backward compatibility reasons, but it’s no longer recommended.

The value can be: authenticating, connecting, open, failed, closed or unavailable.

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