@liveblocks/redux

@liveblocks/redux

A store enhancer to integrate Liveblocks into Redux stores.

Installation

npm install @liveblocks/client @liveblocks/redux

Documentation

Read the documentation for guides and API references.

Examples

Explore our collaborative examples to help you get started.

All examples are open-source and live in this repository, within /examples.

Releases

See the latest changes or learn more about upcoming releases.

Community

• Discord - To get involved with the Liveblocks community, ask questions and share tips.
• Twitter - To receive updates, announcements, blog posts, and general Liveblocks tips.

License

Licensed under the Apache License 2.0, Copyright © 2021-present Liveblocks.

See LICENSE for more information.

Changelog

v0.19.0

This release brings Zustand v4 support. This is a breaking change only if you’re using @liveblocks/zustand.

In @liveblocks/zustand:

• Support Zustand v4 (actually v4.1.3 or higher)
• Drop support for Zustand v3 (also v4.1.2 or lower are not supported)
• Fix bug where some usage pattern could cause the Zustand store to stop synching (#491)

To migrate, make the following code changes:

• npm install zustand@latest
• npm install @liveblocks/zustand@latest
• Change these imports, if applicable:

  -import { middleware } from "@liveblocks/zustand";
  +import { liveblocks } from "@liveblocks/zustand";
  

  and

  -import type { LiveblocksState } from "@liveblocks/zustand";
  +import type { WithLiveblocks } from "@liveblocks/zustand";
  

  and rename accordingly.
• Change the pattern:

  create(liveblocks<MyState, ...>(...))
  

  to the Zustand v4 recommended pattern:

  create<WithLiveblocks<MyState, ...>>()(liveblocks(...))
  

  To be clear:
  1. First, move the type annotation away from the liveblocks middleware call, and onto the create call.
  2. Next, wrap your MyState type in a WithLiveblocks<...> wrapper. This will make sure the injected liveblocks property on your Zustand state will be correctly typed.
  3. Finally, make sure to add the extra call () wrapper, needed by Zustand v4 now:

     create<WithLiveblocks<MyState, ...>>()(liveblocks(...))
     //                                  ^^ Not a typo
     

• Remove the second argument to state.liveblocks.enterRoom(): it no longer takes an explicit initial state. Instead, it's automatically be populated from your Zustand state.

In @liveblocks/redux:

• The main export has been renamed:

  -import { enhancer } from "@liveblocks/redux";
  +import { liveblocksEnhancer } from "@liveblocks/redux";
  

• The second argument to state.liveblocks.enterRoom() to send in an explicit initial state is no longer supported. It will use the state in your Redux store, for consistency and ease of use.