@kun.s/munity v0.0.4

Munity

Munity is an opinionated Angular state management library based on Immer.js. This library is heavily inspired by ngrx, redux-observable.
It is currently WORK IN PROGRESS, but It is fully functional.

To run the sample application npm install , then ng serve

Concepts

• Effect is an asynchronous operation with state mutation.
• Mutation is a function takes the current state, payload as input and mutate the state in its body.

Select

To read the content of the store as Rx.js observable

interface StateModel {
    posts:IPost[];
    loading: false
}
// select substate
stateChange = this.store.select((current)=>current.posts);
// select entire store
stateChange = this.store.select();

To just read the current value

interface StateModel {
    posts:IPost[];
    loading: false
}
// select substate
current = this.store.snapshot((current)=>current.posts);
// select entire store
current = this.store.snapshot();

Effect

To make an effect just implement the Effect interface, and provide async operation in task function. Implement IResultOfEffect to provide a selector function to retrieve the result of state mutation

@Injectable({providedIn: 'root'})
export class SideEffectOfLoadPost implements IResultOfEffect<IPost[], State, IPost[]> {
    readonly action: ActionID = 'SET_POSTS';

    constructor(private readonly api: BackendService) {

    }

    selector(state: State) {
        return state.posts;
    }

    task(): Observable<IPost[]> {
        return this.api.getPostList();
    }

}

Mutation

Mutation is just a function placed in store config object, perform state directly on current state.

const postStoreConfig: IStoreConfig<State> = {
    init: {posts: [], name: '', selected: null},
    mutations: {
        SET_POSTS: (current: State, payload: IPost[]) => {
            current.posts = payload;
        },
        SET_SELECTED: (current: State, payload: IPost) => {
            current.selected = payload;
        }
    }
};