logux-redux's Introduction

Logux Redux

Logux is a new way to connect client and server. Instead of sending HTTP requests (e.g., AJAX and GraphQL) it synchronizes log of operations between client, server, and other clients.

Guide, recipes, and API
Chat for any questions
Issues and roadmap
Projects inside Logux ecosystem

This repository contains Redux compatible API on top of Logux Client.

Install

npm install @logux/core @logux/client @logux/redux redux

Usage

See documentation for Logux API.

import { CrossTabClient, log } from '@logux/client'
import { createStoreCreator } from '@logux/redux'

let userId = document.querySelector('meta[name=user]').content
let token = document.querySelector('meta[name=token]').content

const client = new CrossTabClient({
  subprotocol: '1.0.0',
  server: 'wss://example.com:1337',
  userId,
  token
})

const createStore = createStoreCreator(client)

const store = createStore(reducers, preloadedState)
log(store.client)

export default store

import { Provider } from 'react-redux'
import ReactDOM from 'react-dom'

import store from './store'
import App from './App'

ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById('root')
)

import { useSubscription } from '@logux/redux'

export const User = ({ id, name }) => {
  const isSubscribing = useSubscription([`user/${ id }`])
  if (isSubscribing) {
    return <Loader />
  } else {
    return <h1>{ name }</h1>
  }
}

Recommend Projects