Replacing Redux to Logux Redux

If you already have Redux application, this guide will help you to add Logux Redux to project. Logux Redux can work with any UI framework. We will use React only as an example.

If you are starting new project use special guide.

Server

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

How to create the server on Node.js.
How to create a proxy to use HTTP server on any other language.

Adding Logux Redux

Install Logux Redux:

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

pnpm add @logux/core @logux/client @logux/redux

yarn add @logux/core @logux/client @logux/redux

Find store definition in your project. Look for createStore function call. Often you can find it at src/index.js or src/store/index.js.

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://logux.example.com',
  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, preloadedState, enhancer)

store.client.start()

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

pnpm add @logux/client

yarn add @logux/client

Use helpers where you create the store.

import { createStoreCreator } from '@logux/redux'
import { badge, badgeEn, log } from '@logux/client'
import { badgeStyles } from '@logux/client/badge/styles'

badge(store.client, { messages: badgeEn, styles: badgeStyles })
log(store.client)

store.client.start()

Check the Result

Open three terminals.
Start your Logux server in one terminal by npm start in server directory.
Start your back-end server in the second terminal.
Start your client in the third terminal by npm start in client directory.

If badge style doesn’t fit your website style, you can always tweak it or replace with your component. See badge() and status() API.

Next chapter