liveblocksEnhancer does not mix in LiveblocksContext to the state

[johannes-lindgren]

What is the improvement or update you wish to see?

When you use liveblocksEnhancer, the liveblocks state should be automatically mixed into the store's state.

For example, given the following configuration:

export const store = configureStore({
  reducer: {
  },
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers().concat(
      liveblocksEnhancer({
        client,
      }),
    ),
})

export type RootState = ReturnType<typeof store.getState>
export const useAppSelector = useSelector.withTypes<RootState>()

liveblocks should be present on the state. But since it's not, I get a type error when I try to access the liveblocks state in a selector:

const WhoIsHere: FunctionComponent = () => {
  const othersUsersCount = useAppSelector(
    (state) => state.liveblocks.others.length, // <--- type error here since `liveblocks` is not defined on the state type.
  )

  return (
    <div className="who_is_here">
      There are {othersUsersCount} other users online
    </div>
  )
}

This happens because liveBlocksEnhancer is declared as

declare const liveblocksEnhancer: <TState>(options: {
    client: Client;
    storageMapping?: Mapping<TState> | undefined;
    presenceMapping?: Mapping<TState> | undefined;
}) => StoreEnhancer;

where the return type StoreEnhancer does not have type arguments. This means that the liveblocks property does not get mixed into the state, and users of this library have to assert the type manually.

I would expect something like:

declare const liveblocksEnhancer: <TState>(options: {
    client: Client;
    storageMapping?: Mapping<TState> | undefined;
    presenceMapping?: Mapping<TState> | undefined;
}) => StoreEnhancer<
        Record<string, never>,
        WithLiveblocks<Record<string, never>, JsonObject, BaseUserMeta>
      >;

Possibly with something else as the first type argument, for I don't know if this liveblocksEnhancer augments the store type.

Ex. https://liveblocks.io/docs/api-reference/liveblocks-react

[johannes-lindgren]

When I run the code from the example in the documentation, everything works, but I get the following warning from Redux (as in this issue):

Unexpected key "liveblocks" found in previous state received by the reducer. Expected to find one of the known reducer keys instead: "mySlice". Unexpected keys will be ignored.

I managed to work around it in this way, by creating a dummy reducer:

export const store = configureStore({
  reducer: {
    mySlice: mySlice.reducer,
    liveblocks: createSlice({
      name: 'liveblocks',
      initialState: {
        others: [],
        status: 'initial',
        connection: 'authenticating',
        isStorageLoading: true,
      } satisfies WithLiveblocks<
        Record<string, never>,
        JsonObject,
        BaseUserMeta
      >['liveblocks'],
      reducers: {},
    }).reducer,
  },
  enhancers:
    apiKey === undefined
      ? undefined
      : (getDefaultEnhancers) =>
          getDefaultEnhancers().concat(
            liveblocksEnhancer({
              client: createClient({
                publicApiKey: apiKey,
              }),
              storageMapping: {
                concepts: true,
                conversations: true,
              },
            }),
          ),
})

In this way, I don't need to asser the type of liveblocksEnhancer, but the dummy reducer is no so pretty. Is this the right thing to do?