Sign in
GuidesReact, Redux, Tutorials

How to use Liveblocks Presence with Redux

In this guide, we’ll be learning how to use Liveblocks Presence with Redux using the APIs from the [@liveblocks/redux][] package.

Install Liveblocks

This guide assumes you already have Liveblocks set up into your Redux store. If you don’t make sure to follow these quick steps to get started first.

Get other users in the room

Need help troubleshooting presence?

Try the Liveblocks DevTools extension to inspect and debug your collaborative experiences as you build them, in realtime.

If you want to list all the people connected to the room, you can use state.liveblocks.others to get an array of the other users in the room.

import { useSelector } from "react-redux";
function App() {  const others = useSelector((state) => state.liveblocks.others);}

Update user presence

To create immersive multiplayer experiences, it’s helpful for each person in the room to share their real‑time state with other connected users. That real‑time state often corresponds to a cursor position or even the item a user has currently selected. We call this concept "Presence".

For instance, to share the cursor’s position in real‑time with others, we’re going to add a new presenceMapping option to our enhancer to specify which part of the state maps to the current user’s presence.

src/store.js
/* ... imports and client setup ... */
const initialState = {  cursor: { x: 0, y: 0 },};
const slice = createSlice({  name: "state",  initialState,  reducers: {    setCursor: (state, action) => {      state.cursor = action.payload;    },  },});
export const { setCursor } = slice.actions;
function makeStore() {  return configureStore({    reducer: slice.reducer,    enhancers: (getDefaultEnhancers) =>      getDefaultEnhancers().concat(        enhancer({          client,          presenceMapping: { cursor: true },        })      ),  });}
const store = makeStore();
export default store;

Then you can dispatch an action like in any redux app and we will broadcast this cursor to everyone in the room.

import { useDispatch } from "react-redux";import { setCursor } from "./store.js";
function YourComponent() {  const dispatch = useDispatch();
  return (    <div      style={{ width: "100vw", height: "100vh" }}      onPointerMove={(e) => dispatch(setCursor({ x: e.clientX, y: e.clientY }))}    />  );}

Get other users’ presence

Get people’s cursor positions with liveblocks.others.map(user => user.presence?.cursor). It’s worth noting that a user presence can be undefined.

import { useSelector } from "react-redux";
function OthersCursors() {  const others = useSelector((state) => state.liveblocks.others);
  const othersCursors = others.map((user) => user.presence?.cursor);
  // Render cursors with custom SVGs based on x and y}

Related guides