Skip to main content

Basic example

The classic example of a counter

What You'll Learn
  • How to create a simple service and bind it to your React app
Prerequisites

The service​

Create the new service​

First we create the file counter.service.ts

The created service must extend Service which has been auto-generated in the setup step

export class CounterService extends Service {

}

Service state​

Each service has a local state, it is referenced as initialState which must be static

Pass the State type to the extended Service as Service<State>

type State = { count: number };

export class CounterService extends Service<State> {
  static initialState: State = { count: 0 };
}

Append a method​

Each method has access to the local state as an observable

To access a local state use its method get

To modify a local state use its method set

type State = { count: number };

export class CounterService extends Service<State> {
  static initialState: State = { count: 0 };

  increment() {
    this.state.count.set((count) => count + 1);
  }
}

Register the service​

In the file _services

import { CounterService } from './counter.service';

export const services = {
  counter: CounterService,
};

Wrap the App with the CortexProvider​

 <CortexProvider coreInstance={new Core()}>
    <App />
 </CortexProvider>

Use the methods in the app​

Use the hook useService with the name of the service, here counter

You can access any method by destructuring this hook return value, and use it in the JSX

const InnerApp: FC = () => {
  const { increment } = useService('counter');

  return (
    <div>
        <button onClick={increment}>increment counter value</button> 
    </div>
  );
};

Access the state in the app​

You can access to any value thanks to the useAppSelector, anytime the value store.counter.count changes, the value will be re-rendered in the JSX

const InnerApp: FC = () => {
  const { increment } = useService('counter');
  const count = useAppSelector((store) => store.counter.count.get());  

  return (
    <div>
        <button onClick={increment}>+</button>
        <span>{count}</span> 
    </div>
  );
};

Test the behavior​

Since all the logic is completely decoupled from React, we can test the behavior of our app with Jest

describe('counter', () => {
  it('should be incremented', () => {
    const core = new Core()

    expect(core.store.counter.get()).toBe(0)

    core.getService("counter").increment()
    expect(core.store.counter.get()).toBe(1)
  })
})