State Management

MobX powered predictable state management that provides the mechanism to store and update the application state that React then uses.

Oreact allows you to create stores at different levels: Application level and Page level.

Adding a Global Store

Oreact simplifies application level state which is accessible anywhere throughout your application.

Global Stores you can create under a folder called stores in the application directory.

Example

Create store class at app/stores/globalStore.js with following content:

export default class todoStore {    
    @observable title = ""
    @observable finished = false

    constructor(initialState) {
        if (initialState) {
            this.title = initialState.title;
            this.finished = initialState.finished;
        }
    }

    @action
    setTitle(title) {
        this.title = title
    }

    toJSON() {
        return {
            title: this.title,
            finished: this.finished
        };
    }
}

Add newly created store into a application stores registry at app/stores/index.js:

import todoStore from './todoStore';

export default {
    todoStore
}

Adding a Page level Store

For example, Consider adding a store for your profile page located at app/pages/profile.

Create a profile store with the following content:

app/pages/profile/store.js

export default class store {    
    @observable firstName = ""
    @observable lastName = ""

    constructor(initialState) {
        if (initialState) {
            this.firstName = initialState.firstName;
            this.lastName = initialState.lastName;
        }
    }

    @action
    setFirstName(firstName) {
        this.firstName = firstName
    }

    @action
    setLastName(lastName) {
        this.lastName = lastName
    }

    toJSON() {
        return {
            firstName: this.firstName,
            lastName: this.lastName
        };
    }
}

Now adding this store into page route configuration as below:

app/pages/profile/config.js

import React from 'react';
import loadable from '@oreact/core/loadable';
import profileStore from './store';

export default {    
    routes: [
        {
            address: '/profile',            
            component: loadable(() => import('./Component'), {ssr: true}),           
        }
    ],    
    stores: {
        profileStore
    }
};

Hooks

With the Oreact store hooks, you can access available stores.

useStores

Returns a set of stores available in a application.

For Example

If you want to access profile store created in above example:

import {observer} from 'mobx-react';
import {useStores} from '@oreact/core/store';

export default observer(() => {
    const {profileStore} = useStores();
    return <div>{profileStore.firstName} {profileStore.lastName}</div>;
});

useSelector

Allows you to extract data from the MobX store state, using a selector function.

import {observer} from 'mobx-react'; 
import {useSelector} from '@oreact/core/store';

export default observer(() => {
    const firstName = useSelector(({profileStore}) => profileStore.firstName);
    return <div>{firstName}</div>;
});