Application

Oneki.js provides a component to wrap the entire application. This component starts the framework and is usually the most external component of an application.

caution

The <App/> component is not the same for applications built from Create React App or Next.js.
Select the correct tab to view the documentation for what you are using.

Vite App

Examples

Minimal example

The minimum example consists of wrapping the entire application with <App/>
<App/> bootstraps a router (React router) and a store (Redux)

index.tsx

getting-started/cra/step02-navigation/src/index.tsx

loading...

See full example on GitHub

router.tsx

getting-started/cra/step02-navigation/src/pages/_router.tsx

loading...

See full example on GitHub

👁 Preview

Settings

In most cases, a configuration is injected into the application.
By convention, this configuration is coming from src/settings.ts

index.tsx

getting-started/cra/step04-authentication/src/index.tsx

loading...

See full example on GitHub

router.tsx

getting-started/cra/step04-authentication/src/pages/_router.tsx

loading...

See full example on GitHub

👁 Preview

App with settings, store and global services

This example shows how to create the properties expected by <App/>

In general, only the settings property is passed to <App/> while the other properties (store, services, ...) are initialized by the <App/> itself.

The example below initializes an <App/> by passing these properties:

• Settings: An object defined in the file src/settings.ts
• A global service: A global service is instantied only once and accessible everywhere in the application. The role of a service is to manipulate the Redux store. Check this documentation for more info.
• A redux store: Normally the redux store should not be initialized manually, but this example shows how it's possible to inject our own store

index.tsx

examples/cra-app-custom-store/src/index.tsx

loading...

See full example on GitHub

Main.tsx

examples/cra-app-custom-store/src/Main.tsx

loading...

See full example on GitHub

LoadingService.ts

examples/cra-app-custom-store/src/LoadingService.ts

loading...

See full example on GitHub

Documentation

<App/> is the main component that bootstraps the Oneki.js framework on top of Create React App

This component is generally the external component of an application and is responsible for:

• creating a Redux store:
  • If the store property is present, App doesn't create a Redux store but uses the one referenced by the property.
  • Otherwise, <App/> creates the Redux store. The initial state of the store is the object referenced by the property initialState.
• creating a React Router. By default, it creates a BrowserRouter that can be changed / configured via the settings.ts file
• creating and injecting global services in the Redux store
• creating a context that contains three elements:
  • router: accessible via useRouter()
  • settings: accessible via useSettings()
  • redux store: accessible via useStore()

Custom redux store

A custom Redux store can be created by calling the helper createReduxStore from Oneki.js

const store = createReduxStore((initialState = {}), (middlewares = []));

This helper expects an initial state and an array of Redux middlewares.

Properties

(Mandatory properties are in bold)

Properties	Type	Description
settings	AppSettings | Promise<AppSettings>	Settings is a object usually defined in the file src/settings.ts Data defined in settings.ts is available throughout the application and contains configuration data. More info here

Additional properties for advanced use cases

Properties	Type	Description
ErrorBoundaryComponent	ComponentType<ErrorBoundaryComponentProps>	The component displayed when an error occurs during the rendering phase Defaults to: no error boundary component
i18nNs	string[]	More info here Defaults to: undefined
initialLocale	string	Property to indicate the language to be used by default Defaults to: undefined
initialState	AnyState | Promise<AnyState>	The initial state passed to the Redux store when it is created Defaults to: undefined
LoadingComponent	ElementType	A component expected by <Suspense> (used to display a loading indicator) Defaults to: <DefaultLoadingComponent /> that displays "Loading..."
services	Class<default<AnyState>>[]	A list of services that will be available globally in the application. More info here
store	AppStore<any, AnyAction>	A standard Redux store, but created via the helper createReduxStore from onekijs The store must be created via this helper so onekijs can control it Defaults to: A store created by <App/> (recommended)
translations	AnonymousObject<AnonymousObject<string>>	An object containing the translations More info here Defaults to: undefined

Nextjs App

<NextApp/> is the main component that bootstraps the Oneki.js framework on top of Next.js

This component is generally the external component of an application (defined in the file _app.js) and is responsible of:

• creating a Redux store:
  • If the store property is present, App doesn't create a Redux store but uses the one referenced by the property.
  • Otherwise, <App/> creates the Redux store. The initial state of the store is the object referenced by the property initialState.
• creating and injecting global services in the Redux store
• creating a context that contains three elements:
  • router: accessible via useRouter()
  • settings: accessible via useSettings()
  • redux store: accessible via useStore()

<NextApp
  settings={settings}
  store={store}
  initialState={initialState}
  services={[services]}
  LoadingComponent={LoadingComponent}
  Component={Component}
  pageProps={pageProps}
/>

Parameters

Mandatory parameters are in bold

Parameter	Type	Description
settings	AppSettings	Settings is a object usually defined in the file src/settings.ts Data defined in settings.ts is available throughout the application and contains configuration data. More info here Defaults to: {}
store	AppStore	A standard Redux store, but created via the helper createReduxStore from onekijs The store must be created via this helper so onekijs can control it (See below for more info) Defaults to: A store created by <NextApp/> (recommended)
initialState	AnyState | Promise<AnyState>	The initial state is passed to the Redux store when it is created Defaults to: null
services	Service[]	A list of services that will be available globally in the application. More info here Defaults to: []
LoadingComponent	ElementType	A component expected by <Suspense> (used to display a loading indicator) Defaults to: DefaultLoadingComponent that displays "Loading..."
initialLocale	string	Property to indicate the language to be used by default. Defaults to: null
translations	any	An object containing the translations. More info here Defaults to: null
i18nNs	string[]	More info here Defaults to: null
ErrorBoundaryComponent	ComponentType <ErrorBoundaryComponentProps>	The component displayed when an error occurs during the rendering phase Defaults to: no error boundary component
Component	ElementType	The Page component injected by Next.js
pageProps	any	The Page props injected by Next.js

Custom redux store

A custom Redux store is created by calling the helper createReduxStore from Oneki.js
The helper expects an initial state and an array of Redux middlewares.

const store = createReduxStore((initialState = {}), (middlewares = []));

Examples

Minimal example

Open in CodeSandbox | View code on GitHub

Example with settings, store and global services

caution

This example creates a custom global service that uses annotations. To enable the support of annotations in typescript, you must install this babel plugin:

yarn add @babel/plugin-proposal-decorators -D

and add the file .babelrc at the root of the project with the following content:

{
  "presets": ["next/babel"],
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

Open in CodeSandbox | View code on GitHub