API Reference - @liveblocks/redux

Enhancer

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

import { enhancer } from "@liveblocks/redux";import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({  reducer: /* reducer */,  enhancers: [    enhancer({      client,      storageMapping: {},      presenceMapping: {},    }),  ],});

client

See different authentication methods in the createClient method.

import { createClient } from "@liveblocks/client";import { enhancer } from "@liveblocks/redux";
const client = createClient({  authEndpoint: "/api/auth",});
const store = configureStore({  reducer: /* reducer */,  enhancers: [    enhancer({      client,    }),  ],});

presenceMapping

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

import { enhancer } 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: [    enhancer({      client,      presenceMapping: { cursor: true },    }),  ],});

storageMapping

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

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

Actions

ENTER

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

• roomId: The id of the room.
• initialState: The initial state of the room storage.

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

LEAVE

Dispatch leaveRoom action to leave a room and stop sync it with Redux state.

• roomId: The id of the room.

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

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

connection

Connection state of the room.

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

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