inferno-fluxible

Connector for inferno-js and fluxible-js. See demo.

Install

npm i -s inferno-fluxible fluxible-js redefine-statics-js

Usage

Initialize store

import { initializeStore } from 'fluxible-js';

initializeStore({
  initialStore: {
    user: {
      name: 'Test User'
    },
    anotherState: 'value'
  }
});

// rest of the app.

Before you render your app, you MUST call initializeStore. It expects an object as the only parameter, the object have a required property called initialStore which will be used as the initial value of the store.

There's also the optional property called persist which MUST also be an object containing two required properties. Learn more about fluxible-js.

🆕 Connecting your components to the store

import { mapStatesToProps } from 'inferno-fluxible';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <p>{this.props.user.name}</p>
      </div>
    );
  }
}

export default mapStatesToProps(MyComponent, states => {
  return {
    user: state.user
  };
});

mapStatesToProps has two parameters. (1) The component itself. (2) A callback function that must return the states you want to be available as props in that component.

🆕 Updating the store

You can choose between using the event bus or calling updateStore directly from the component.

Using updateStore

import { updateStore } from 'fluxible-js';
import { mapStatesToProps } from 'inferno-fluxible';

class MyComponent extends Component {
  handleClick = () => {
    updateStore({
      anotherState: 'newValue'
    });
  };

  render() {
    return (
      <div>
        <p>{this.props.user.name}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default mapStatesToProps(MyComponent, states => {
  return {
    user: state.user,
    anotherState: state.anotherState
  };
});

You can also build a function yourself that would perform what you need to do.

import { updateStore } from 'fluxible-js';
import { mapStatesToProps } from 'inferno-fluxible';
import { doSomething } from '../mutations';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <p>{this.props.user.name}</p>
        <button onClick={doSomething}>Click me</button>
      </div>
    );
  }
}

export default mapStatesToProps(MyComponent, states => {
  return {
    user: state.user,
    anotherState: state.anotherState
  };
});

This is better compared to how connect used to do it. This is more flexible, manageable, and performant. You don't need to make a lot of function calls when you can simply import updateStore and getStore pretty much wherever you want. The only purpose of mapStatesToProps provided by inferno-fluxible is to make sure that the components receive the latest store when the store is updated.

Using the event bus

Somewhere in your source code, ideally before emitting this event:

import { addEvent, updateStore } from 'fluxible-js';

addEvent('my-event', payload => {
  console.log(payload);

  updateStore({
    anotherState: payload
  });
});

On your component:

import { emitEvent } from 'fluxible-js';
import { mapStatesToProps } from 'inferno-fluxible';

class MyComponent extends Component {
  handleClick = () => {
    emitEvent('my-event', 'newValue');
  };

  render() {
    return (
      <div>
        <p>{this.props.user.name}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default mapStatesToProps(MyComponent, states => {
  return {
    user: state.user,
    anotherState: state.anotherState
  };
});

Contributing

Discussions, questions, suggestions, bug reports, feature request, etc are all welcome. Just create an issue. Just ensure that you are responsive enough.

Created with ❤️ by April Mintac Pineda.

aprilmintacpineda / inferno-fluxible