How to use redux with inversify ?

[arturkasperek]

I find out that @remojansen was working for little helper for connecting redux state without context https://github.com/redux-bootstrap/libertad. But as I see development of lib was stoped. We can just make subscribe on store and after change update component state.

class Hello extends React.Component<{}, {}> {
    @inject('MLSStore')
    private MLSStore;
    constructor() {
        super();
        console.log('sa ', this.MLSStore);

        this.MLSStore.subscribe((newState) => {
            console.log('redux state changed ', newState);
        })
    }
    render() {
        return <h1>Hello from component!</h1>;
    }
}

But this way is messy. How we should in correct way pass store to react component?

[remojansen]

The correct to pass some state from redux to a react component is using the connect function from the npm module react-redux. Connected components are considered smart components.

Libertad is an experiment that I have not been able to complete due to lack of free time 😢

If you want to pass the store to a component without using connect you could use inversify-inject-decorators. It will allow you to inject the store as a property:

import getDecorators from "inversify-inject-decorators";
import { Container } from "inversify";
import { MLSStore } from "./store";

let container = new Container();
let { lazyInject } = getDecorators(container);

container.bind<MLSStore>("MLSStore").to(MLSStore);

export { lazyInject };

import * as React from "react";
import { lazyInject } from "./ioc";

class Hello extends React.Component<{}, {}> {

    @lazyInject('MLSStore')
    private MLSStore;

    constructor() {
        super();
        console.log('sa ', this.MLSStore);

        this.MLSStore.subscribe((newState) => {
            console.log('redux state changed ', newState);
        })
    }

    render() {
        return <h1>Hello from component!</h1>;
    }

}

I recommend reading http://blog.wolksoftware.com/dependency-injection-in-react-powered-inversifyjs to understand why react doesn't play nicely with constructor injection.

Hope this helps 😉

[vforv]

@remojansen will it connect to props?

Since I know pkg connect connects redux to props

[do-kevin]

The correct to pass some state from redux to a react component is using the connect function from the npm module react-redux. Connected components are considered smart components.

Libertad is an experiment that I have not been able to complete due to lack of free time 😢

If you want to pass the store to a component without using connect you could use inversify-inject-decorators. It will allow you to inject the store as a property:

import getDecorators from "inversify-inject-decorators";
import { Container } from "inversify";
import { MLSStore } from "./store";

let container = new Container();
let { lazyInject } = getDecorators(container);

container.bind<MLSStore>("MLSStore").to(MLSStore);

export { lazyInject };

import * as React from "react";
import { lazyInject } from "./ioc";

class Hello extends React.Component<{}, {}> {

  @lazyInject('MLSStore')
  private MLSStore;

  constructor() {
      super();
      console.log('sa ', this.MLSStore);

      this.MLSStore.subscribe((newState) => {
          console.log('redux state changed ', newState);
      })
  }

  render() {
      return <h1>Hello from component!</h1>;
  }

}

I recommend reading http://blog.wolksoftware.com/dependency-injection-in-react-powered-inversifyjs to understand why react doesn't play nicely with constructor injection.

Hope this helps 😉

What does MLSStore look like?