Retax-Components

This is a set of components to help you to structure and reduce the boilerplate of your retax app.

This is very in experimental. These components are not tested at the moment.

Getting started

npm install --save retax-components

Create an API

// apis/user.js
import { annotator, AbstractApi } from 'retax-components';

@annotator.Api({
  baseUrl: 'http://localhost:8080',
  routes: {
    users: '/user',
  },
})
export default class UserApi extends AbstractApi {
  getCurrent() {
    return this.get({ url: `${this.routes.users}/me` });
  }
}

Create an Actions creator

// actionsCreators/user.js
import { annotator, AbstractActionsCreator } from 'retax-components';

import UserApi from 'apis/user';
import ThemeActionsCreator from 'actions/theme';

@annotator.ActionsCreator({
  apis: {
    userApi: UserApi,
  },
  actionsCreators: {
    theme: ThemeActionsCreator,
  },
})
export default class UserActionsCreator extends AbstractActionsCreator {

  @annotator.action()
  fetchCurrentUser() {
    return async dispatch => {
      const { setAdminTheme, setUserTheme } = this.actionsCreators.theme;

      const res = await this.apis.userApi.getCurrent();

      dispatch(res.isAdmin ? setAdminTheme() : setUserTheme());
    }
  }
}

Create Retax Component

// container/Signin.js
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { annotator } from 'retax-components';

import UserActionsCreator from 'actionsCreators/user';

function mapDispatchToProps(dispatch, props) {
  const { userActions } = props;

  return bindActionCreators({
    ...userActions.export(), // get all methods of UserActionsCreator annotated with @annotator.action()
  }, dispatch);
}

@annotator.RetaxComponent({
  actionsCreators: {
    userActions: UserActionsCreator,
  },
})
@connect(() => {}, mapDispatchToProps)
export default class SigninPage extends Component {
  static propTypes = {
    fetchCurrentUser: PropTypes.func,
  };

  componentDidMount() {
    this.props.fetchCurrentUser();
  }

  render() {
    return (
      <div>Hello World!</div>
    );
  }
}

FAQ

I don't understand how this library is built

Check builder and builder-ts-library

Typescript support

This project is shipped with typescript typings. If you are using typescript@^1.6, you don't have to do anything, it will detect the definition types automatically.

##License MIT License (MIT)