LogoLogo
  • Eventrix
  • Introduction
    • Installation
    • Quick start
    • Getting started
    • Demo
    • About
  • Devtools - EventrixDebugger
  • Use cases
    • Handle errors
    • Simple form management
    • Communication between components
    • Next.js
    • Basic setup on project
    • Fetch list and display in component
  • CONTEXT
    • EventrixProvider
    • PersistStoreGate
    • EventrixScope
  • MIGRATION
    • Redux -> Eventrix
  • Receivers
    • EventsReceiver
    • RequestsHandler
    • fetchToStateReceiver
    • fetchStateReceiver
    • fetchHandler
  • HOC
    • withEventrix
    • withEventrixState
  • HOOKS
    • useEventrixState
    • useEmit
    • useEvent
    • useEventState
    • useFetchToState
    • useReceiver
    • useFetchState
  • CLASS DECORATORS
    • @useEventrix
    • @receiver
    • @fetchToState
    • @listener
  • COMPONENT DECORATORS
    • @eventrixComponent
    • @eventListener
    • @stateListener
    • @eventrixState
Powered by GitBook
On this page

Was this helpful?

  1. HOOKS

useEventrixState

This hook return eventrix state and setState method.

If You want use hooks, hocs or component decorator You must use EventrixProvider in Your application. Go to "EventrixProvider" page in "Context" section for more details.

import React from 'react';
import { useEventrixState } from 'eventrix';

const UsersList = () => {
    const [users, setUsers] = useEventrixState('users');
    return (
        <div>
            {users.map(user => <div>{user.name}</div>)}
        </div>
    );
}
import React from 'react';
import { useEventrixState } from 'eventrix';
import { User } from './interfaces';

const UsersList = () => {
    const [users, setUsers] = useEventrixState<User[]>('users');
    return (
        <div>
            {users.map(user => <div>{user.name}</div>)}
        </div>
    );
}

If you need only some specific data from state you can get exactly what you want. Thanks of that you will receive better performance of your app. Here is an example how to do that.

import React from 'react';
import { useEventrixState } from 'eventrix';

const UserDetails = () => {
    const [name] = useEventrixState('currentUser.name');
    const [age] = useEventrixState('currentUser.age');
    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
        </div>
    );
}
import React from 'react';
import { useEventrixState } from 'eventrix';

const UserDetails = () => {
    const [name] = useEventrixState<string>('currentUser.name');
    const [age] = useEventrixState<number>('currentUser.age');
    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
        </div>
    );
}
PreviouswithEventrixStateNextuseEmit

Last updated 2 years ago

Was this helpful?