Switch branches/tags
usecase-bus@1.1.0 node-memory-leak-testing@2.0.1 node-memory-leak-testing@2.0.0 example-todomvc@1.1.0 example-todomvc@1.0.2 example-todomvc@1.0.1 example-todomvc-typescript@1.1.0 example-todomvc-flow@1.1.0 example-todomvc-flow@1.0.2 example-todomvc-flow@1.0.1 example-svg-feeling@1.1.0 example-svg-feeling@1.0.2 example-svg-feeling@1.0.1 example-shopping-cart@1.1.0 example-shopping-cart@1.0.2 example-shopping-cart@1.0.1 example-perf-node-memory-leak-testing@2.1.0 example-perf-benchmark@1.1.0 example-introduction@1.1.0 example-counter@1.1.0 example-counter@1.0.2 example-counter@1.0.1 benchmark@1.0.2 benchmark@1.0.1 almin@0.18.1 almin@0.18.0 almin@0.17.1 almin@0.17.0 almin@0.16.0 almin@0.15.3 almin@0.15.2 almin@0.15.1 almin@0.15.0 almin@0.14.0 almin@0.13.11 almin@0.13.10 almin@0.13.9 almin@0.13.8 almin@0.13.7 almin@0.13.6 almin@0.13.5 almin@0.13.4 almin@0.13.3 almin@0.13.2 almin@0.13.1 almin@0.13.0 almin@0.12.5 almin@0.12.4 almin@0.12.3 almin@0.12.2 almin@0.12.1 almin@0.12.0 @almin/usecase-bus@1.2.2 @almin/usecase-bus@1.2.1 @almin/usecase-bus@1.2.0 @almin/store-test-helper@1.1.3 @almin/store-test-helper@1.1.2 @almin/store-test-helper@1.1.1 @almin/store-test-helper@1.1.0 @almin/react-context@1.1.3 @almin/react-context@1.1.2 @almin/react-context@1.1.1 @almin/react-context@1.1.0 almin-react-container@0.7.3 almin-react-container@0.7.2 almin-react-container@0.7.1 almin-react-container@0.7.0 almin-react-container@0.6.4 almin-react-container@0.6.3 almin-react-container@0.6.2 almin-react-container@0.6.1 almin-react-container@0.6.0 almin-react-container@0.5.0 almin-react-container@0.4.0 almin-react-container@0.3.11 almin-react-container@0.3.10 almin-react-container@0.3.9 almin-react-container@0.3.8 almin-react-container@0.3.7 almin-react-container@0.3.6 almin-react-container@0.3.5 almin-react-container@0.3.4 almin-react-container@0.3.3 almin-react-container@0.3.2 almin-react-container@0.3.1 almin-react-container@0.3.0 almin-react-container@0.2.2 almin-react-container@0.2.1 almin-react-container@0.2.0 almin-logger@6.2.3 almin-logger@6.2.2 almin-logger@6.2.1 almin-logger@6.2.0 almin-logger@6.1.5 almin-logger@6.1.4 almin-logger@6.1.3 almin-logger@6.1.2 almin-logger@6.1.1 almin-logger@6.1.0 almin-logger@6.0.0
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
example
src
test
.gitignore
CHANGELOG.md
LICENSE
README.md
package.json
tsconfig.json

README.md

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.

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm i -d && npm test

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

License

MIT © azu