add data layer to the framework package

[one-more]

There should be redux used as data layer in package.

interface ComponentWithState {
    private selector: Function; // selector to derive data from store
    private storeData; // data derived from store by selector
    private store; //store getter
    private actions; //redux actions - should be bound either in getter or in constructor
    private onStoreDataChange(currentData, nextDate): void //by default execure shallow equal and re-render component
}

TODO list:

• add ComponentWithState class extending Component [ ]
• add function registerReducer(key: string, reducer: Function) [ ]
• add function clearReducer(key: string) to clear branch data, not to delete reducer itself [ ]

How to use:

modules/user/data/reducer.ts

// regular redux reducer & actions
export const userReducer = (state, action) {
    switch (action.type) {
       ....
    }
}

export const userActions = {
    login: (name: string, pass: string) => ({
        type: 'LOGIN',
        payload: {
            name,
            pass,
        }
    })
}

modules/user/components/login.ts

import {ComponentWithState} from '@micro-frontends/framework'
import {userActions} from '../data/reducer'

export class LoginForm extends ComponentWithState {
    selector = (state) => state.USER;
    actions = userActions;

    onSubmit(e) {
        e.preventDefault();
        const form = e.target;
        const name = form.name.value;
        const pass = form.pass.value;

        // dispatch login action
        this.actions.login(name, pass);
    }

    render() {
        //render login form
    }
}

modules/user/index.ts

import {registerReducer} from '@micro-frontends/framework'
import {userReducer} from './data/reducer'

registerReducer('USER', userReducer)

export * from './components/login'