aivis-connect

aivis-connect

Description

Decorators to make connecting props and actions more readable

Installation

npm install aivis-connect

Submodules

• connect
• prefetch

Usage example

connect.js

import createConnectWrappers from 'aivis-connect';
import actions from '../common/actions';
import selectors from '../common/selectors';

const {
  connect: connectDecorator,
  connectState: connectStateDecorator,
  connectSelectors: connectSelectorsDecorator,
  connectActions: connectActionsDecorator,
  connectPrefetch: connectPrefetchDecorator,
} = createConnectWrappers({ actions, selectors });

export const connectState = connectStateDecorator;
export const connectSelectors = connectSelectorsDecorator;
export const connectActions = connectActionsDecorator;
export const connectPrefetch = connectPrefetchDecorator;

export default connectDecorator;

App.js

import connect from '../connect';

@connect({
  state: {
    data: ['appStore', 'data']
  },
  actions: {
    sendData: ['api', 'sendData']
  },
  selectors: {
    complexData: ['appSelector', 'complexData']
  },
  prefetch: [
    ['api', 'prefetchSomething']
  ]
})
class App extends Component {
  render() {
    return <div />;
  }
}

You can also use each of connect decorators separately

import { connectState, connectActions, connectSelectors, connectPrefetch } from '../connect';

@connectState({
  data: ['appStore', 'data']
})
@connectActions({
  sendData: ['api', 'sendData']
})
@connectSelectors({
  complexData: ['appSelector', 'complexData']
})
@connectPrefetch([
  ['api', 'prefetchSomething']
])
class App extends Component {
  render() {
    return <div />;
  }
}