silverstripe-framework/admin/client/src/boot
Ingo Schommer 3a690d8084 Moved promise polyfill into boot logic
It's not specific to one single component
2016-10-20 22:03:42 +13:00
..
tests API Update react sections to use react-router instead of page.js (#5796) 2016-07-14 17:51:01 +12:00
BootInjector.js Added react LookupField component 2016-10-05 15:32:05 +13:00
BootRoutes.js BUG Fix hash link navigation in CMS 2016-07-29 15:58:23 +12:00
index.js Moved promise polyfill into boot logic 2016-10-20 22:03:42 +13:00
README.md API Update react sections to use react-router instead of page.js (#5796) 2016-07-14 17:51:01 +12:00

Boot process

appBoot

This is where routes, reducers, and other functions registered by core and thirdparty code are aggregated. It's responsible for bootstrapping the main client application before any React code is executed.

Hooking into appBoot

In order to include routes and reducers in the bootstrapping process, you need to register them before appBoot is called, when the window.onload event is fired.

We can use the DOMContentLoaded event as an opportunity to do this, as it's fired after the initial HTML document is loaded and parsed, and before the window.onload event.

document.addEventListener('DOMContentLoaded', () => {
  // Register things.
});

Registering routes

The ReactRouteRegister can be used to register routes which will be applied to Page.js when appBoot is called.

controller.js

import reactRouteRegister from 'lib/ReactRouteRegister';

document.addEventListener('DOMContentLoaded', () => {
  reactRouteRegister.add('/some/route', (ctx, next) => {
    // Do stuff.
  });
});

Registering reducers

The ReducerRegister can be used to register reducers with the main application Redux store. This store is passed into every route callback on the ctx.store property.

controller.js

import reducerRegister from 'lib/ReducerRegister';
import reactRouteRegister from 'lib/RouteRegister';
import ProductReducer from '../state/product/ProductReducer';

document.addEventListener('DOMContentLoaded', () => {
  reducerRegister.add('product', ProductReducer);

  reactRouteRegister.add('/products', (ctx, next) => {
    ctx.store.getState().product // -> { products: [] }
  });
});