retax-client v1.1.3

Retax-Client

This is the client side of the retax. It calls the retax-core to build the client app and render it.

How it works?

I assume that you will use retax to create a retax app. If you want to bootstrap a client app manually, you could do the following.

I am considering to expose from retax-client a instantiated bootstrapper to help you.

import { connect } from 'react-redux';
import { Route } from 'react-router';

import { InversifyKernelFacade } from 'retax-core';
import { Injector, KernelMediator, KernelFactory } from 'retax-di';
import { ClientBootstrapper } from 'retax-client';

// you could create a top-level IoC container if you don't want to do the following yourself
const inversifyKernelFacadeFactory = () => new InversifyKernelFacade();
const kernelFactory = new KernelFactory(inversifyKernelFacadeFactory);
const injector = new Injector();
const kernelMediator = new KernelMediator(kernelFactory, injector);
const bootstrapper = new ClientBootstrapper(kernelMediator);

const About = connect(
  { counter } => ({ counter })
)(
  ({ counter }) => <div>Hello About! Counter {counter}</div>
);

function counterReducer(state: number = 0, action: any): number {
  switch (action.type) {
    case 'INC':
      return state + 1;
    default:
      return state;
  }
}

const retaxConfig = {
  router: {
    static: (
      <Route path="/">
        <Route path="about" component={About}/>
      </Route>
    ),
  },
  store: {
    reducers: {
      counter: counterReducer,
    },
  },
};

bootstrapper.config(retaxConfig);

const mountPoint = document.querySelector('#root');

bootstrapper.bootstrap(mountPoint).then(() => {
  console.log('The app is rendered!');
});

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)