Almin-react-container NPM

almin-react-container

React bindings for Almin.

Install

Install with npm:

npm install almin-react-container

Usage

`create(component, context): React.Component`

It create container component that is wrap component.

The component can receive context.getState of Almin via this.props.

import React from "react";
import ReactDOM from "react-dom";
import AlminReactContainer from "almin-react-container";
import { Dispatcher, Context, Store } from "almin";
// Store
class MyState {
    constructor({value}) {
        this.value = value;
    }
}
class MyStore extends Store {
    constructor() {
        super();
        this.state = new MyState({
            value: "Hello World!"
        });
    }

    getState() {
        return {
            myState: this.state
        };
    }
}
// Context
const context = new Context({
    dispatcher: new Dispatcher(),
    store: new MyStore()
});

// context.getState();
/*
{
    myState
}
*/
// View
class App extends React.Component {
    render() {
        // this.props has the same with `context.getState()`
        return <div>{this.props.myState.value}</div>
    }
}
// Create Container
const RootContainer = AlminReactContainer.create(App, context);
// Render Container
ReactDOM.render(<RootContainer />, document.getElementById("js-app"));

TypeScript example:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Dispatcher, Context, Store, StoreGroup } from "almin";
import { AlminReactContainer } from "almin-react-container";

// Store
class MyState {
    value: string;

    constructor({ value }: { value: string }) {
        this.value = value;
    }
}

class MyStore extends Store<MyState> {
    state: MyState;

    constructor() {
        super();
        this.state = new MyState({
            value: "Hello World!"
        });
    }

    getState() {
        return this.state;
    }
}

const storeGroup = new StoreGroup({
    myState: new MyStore()
});
// Context
const context = new Context({
    dispatcher: new Dispatcher(),
    store: storeGroup
});

// View
type AppState = typeof storeGroup.state;
// { myState: MyState }
class App extends React.Component<AppState> {
    render() {
        return <div>{this.props.myState.value}</div>;
    }
}

// Create Container
const RootContainer = AlminReactContainer.create(App, context);
// Render
ReactDOM.render(<RootContainer />, document.body);

For more details, see Example/.

For TypeScript user, see almin-react-container-test.tsx.