Join chat

Starting Logux Redux Project

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.

Server

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 Parcel 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'));
    ReactDOM.render(
      <Provider store={store}><App /></Provider>,
      document.getElementById('root')
    );

    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/redux

    Edit src/index.js:

    import reducer from './reducers';
    import { createStore } from 'redux';
    import { createLoguxCreator } from '@logux/redux';
    
    const createStore = createLoguxCreator({
      subprotocol: '1.0.0',
      server: process.env.NODE_ENV === 'development'
        ? 'ws://localhost:31337'
        : 'wss://logux.example.com',
      userId: 'todo',  // TODO: We will fill it in next chapter
      token: '' // TODO: We will fill it in next chapter
    });
    const store = createStore(reducer);
    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 Redux:

  • npm i @logux/client

    Change src/index.js:

    import { createLoguxCreator } from '@logux/redux';
    import { badge, badgeEn, log } from '@logux/client';
    import { badgeStyles } from '@logux/client/badge/styles';
    const store = createStore(reducer);
    badge(store.client, { messages: badgeEn, styles: badgeStyles });
    log(store.client);

    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.