In this section, we will create a UI client for Logux with Logux Redux. Logux Redux can work with any UI framework. We will use React and Create React App only as an example.


Before starting the client, you need to create Logux Server:

Creating the Project

Install Node.js.

You will need a bundler to compile npm packages into JS bundle. Webpack or Vite is excellent for it. Also, we recommend using some library to bind Redux state with DOM. React or Preact is good options. However, for simple UI, you can write code to change DOM according to state changes.

To create a project with a single command, we will use Create React App.

npx create-react-app client-logux
cd client-logux

Adding Redux

Install Redux:

  • npm i react-redux redux

    Open src/index.js:

    import * as serviceWorker from './serviceWorker'
    import { Provider } from 'react-redux'
    import reducer from './reducers'
    import { createStore } from 'redux'
    const store = createStore(reducer)
    ReactDOM.render(<App />, document.getElementById('root'))
      <Provider store={store}><App /></Provider>,

    Create src/reducers/index.js

    import { combineReducers } from 'redux'
    export default combineReducers({
      // TODO: Add reducers depends on application purposes
      test: (state = 0) => state // Remove me when you will have real reducer

    Read how to use Redux.

    Adding Logux Redux

    Install Logux Redux:

  • npm i @logux/core @logux/client @logux/redux nanostores

    Edit src/index.js:

    import reducer from './reducers'
    import { createStore } from 'redux'
    import { CrossTabClient } from '@logux/client'
    import { createStoreCreator } from '@logux/redux'
    const client = new CrossTabClient({
      server: process.env.NODE_ENV === 'development'
        ? 'ws://localhost:31337'
        : 'wss://',
      subprotocol: '1.0.0',
      userId: 'anonymous',  // TODO: We will fill it in Authentication recipe
      token: ''  // TODO: We will fill it in Authentication recipe
    const createStore = createStoreCreator(client)
    const store = createStore(reducer)

    Synchronization UI

    To see the state of the synchronization process, we will add some helpers. They are all optional, but they are great for a start.

    Install Logux Client:

  • npm i @logux/client

    Change src/index.js:

    import { CrossTabClient } from '@logux/client'
    import { CrossTabClient, badge, badgeEn, log } from '@logux/client'
    import { badgeStyles } from '@logux/client/badge/styles'
    import { createStoreCreator } from '@logux/redux'
    badge(store.client, { messages: badgeEn, styles: badgeStyles })

    Check the Result

    1. Open two terminals.
    2. Start your Logux server in one terminal by npm start in server directory.
    3. Start your client in the second terminal by npm start in client directory.