Basic channel

Basic channel

This is a simple counter, that demonstrate how state is forwarded to frontend, and how frontend can interact with backend channel.

The widget at the right (or below depending on your screen) shows the same code in action.

Backend

from rxdjango import ContextChannel, rx, action


class CounterChannel(ContextChannel):

    counter = rx[int](0)

    @action
    async def increment(self):
        self.counter += 1

Frontend

import React from 'react';
import { useChannel } from '@rxdjango/react';
import { CounterChannel } from '../../rx/counter/counter.channels';
import { Demo, Fields, Field, Button } from '../../components/demo';

export function CounterDemo() {
  const channel = useChannel(CounterChannel);

  return (
    <Demo>
      <Fields>
        <Field label="Counter value" large>
          {channel.counter}
        </Field>
      </Fields>
      <Button onClick={channel.increment}>
        Increment
      </Button>
    </Demo>
  );
}

export default CounterDemo;