API Reference - @liveblocks/redux

Enhancer

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

1
2
3
4
5
6
7
8
9
10
11
12
13
import { enhancer } from "@liveblocks/redux";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: /* reducer */,
  enhancers: [
    enhancer({
      client,
      storageMapping: {},
      presenceMapping: {},
    }),
  ],
});

Option: client

See different authentication methods at @liveblocks-client#createClient.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createClient } from "@liveblocks/client";
import { enhancer } from "@liveblocks/redux";

const client = createClient({
  authEndpoint: "/api/auth",
});

const store = configureStore({
  reducer: /* reducer */,
  enhancers: [
    enhancer({
      client,
    }),
  ],
});

Option: presenceMapping

Mapping used to synchronize a part of your redux state with one Liveblocks Room presence.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 },
    }),
  ],
});

Option: storageMapping

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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.

1
2
3
4
5
6
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.

1
2
3
4
5
6
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 connection = 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);