Counter

Counter

A single reactive integer on the channel. Subscribe from React with useChannel, then call increment to run the server-side action and see the value update everywhere it is displayed.

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;