silverstripe-framework/admin/client/src/boot
2017-01-16 16:36:58 +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 API Changes required for asset search behaviour 2017-01-09 14:55:20 +13:00
BootRoutes.js GraphQL 2016-12-20 17:20:06 +13:00
index.js BUG Prevent type-loss of graphql variables by using JSON.stringify 2017-01-16 16:36:58 +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: [] }
  });
});