Single Source of Truth

Here is a simple example of a small utilization of Plexus in a react application. We are creating a core instance (which is a fancy way of saying an object) of our data. We can then export that core and use it and edit it in out components. Every component that uses thes value will be reactive to edits across the DOM.

But we should have some sort of order or structure to this global data. For this, we suggest creating a Core.

Core

/core/index.ts

import { state, collection } from '@plexusjs/core'
export const core = {
    tasks: {
        collection: collection().createGroups(['completed', 'incomplete']),
    },
    user: {
        name: state('default_username'),
    },
}

export default core

Above, we are creating a small core where everything Plexus related is defined in a single file. 😰 While you can technically orchestrate your data this way, it's probably not the best idea. Things will get very messy as the number of data points grows.

If you would like to see the core templates we came up with to keep your data structure scalable, check out our Style Guides Page. We recommend chosing a Style that best fit's the application.

/pages/index.tsx

import { state } from '@plexusjs/core'
import { usePlexus } from '@plexusjs/react'
import core from '/core'

export default function Home() {
    const completedTasks = usePlexus(core.tasks.collection.groups.complete)
    return (
        <div>
            {completedTasks.map((v) => (
                <div>{v.name}</div>
            ))}
        </div>
    )
}

If your application's kinda thicc and you expect a lot of datapoints in your core, you should consider bundling your related instances into what we call modules.

Modules

Try It!