Next.js

You can use eventrix in next.js applications. We will create store with posts as example.

Create store

First we need to create store with initial state.

Javascript

import { Eventrix } from 'eventrix';
import receivers from "./receivers";

const initialState = {
    posts: [],
};

const eventrix = new Eventrix(initialState, receivers);

export default eventrix;

Create receivers

Next step is create receivers.

Javascript

import { EventsReceiver } from 'eventrix';
import axios from "axios";

// This receiver will help us set data from server to store on load appliaction
const setInitialStateReceiver = new EventsReceiver('setInitialState', (eventName, eventData, stateManager) => {
    stateManager.setState('', eventData);
});

// This receiver will fetch posts data
const fetchPostsReceiver = new EventsReceiver('fetchPosts', (eventName, eventData, stateManager) => {
    return axios.get('http://localhost:3000/posts.json').then(({ data }) => {
        stateManager.setState('posts', data.contacts);
    });
});

export default [setInitialStateReceiver, fetchPostsReceiver];

Fetch data on server

Export getServerSideProps method in page component and return posts from API.

Javascript

import eventrix from '../eventrix';

/*
    Here page component code
*/

export async function getServerSideProps() {
    // Fetch data from external API
    await eventrix.emit(`fetchPosts`);
    const posts = eventrix.getState('posts');

    // Pass data to the page via props
    return { props: { posts } };
}

Use Provider

Use EventrixProvider in main component and set initial state from server props.

Javascript

import { EventrixProvider } from "eventrix";
import eventrix from "../eventrix";

export default function App({ Component, pageProps }) {
  eventrix.emit('setInitialState', { posts: pageProps.posts });
  return (
      <EventrixProvider eventrix={eventrix}>
        <Component {...pageProps} />
      </EventrixProvider>
  );
}

Now you can use useEventrixState hook to get data from eventrix store in components.