Want to get paid for your contributions to one-app-ducks?
Send your resume to oneamex.careers@aexp.com
- Combine your reducers with the global reducers within the One App ecosystem.
npm i @americanexpress/one-app-ducksimport { combineReducers } from 'redux-immutable';
import { createStore } from 'redux';
import globalReducers from '@americanexpress/one-app-ducks';
const appReducer = combineReducers({
...globalReducers,
...otherReducers, // Your specific reducers
});
const store = createStore(
appReducer
);Ducks include the reducer, selectors and action creators for a given branch of state. These ducks make up the core of One App's state.
The default export is an object of reducers meant to be included in a call to Redux immutable's
combineReducers when setting up the store. Included
reducers are browser, error, errorReporting, intl, redirection and rendering.
Contents:
This duck is for reading information about the user's browser. It is particularly helpful on the server where this information is not readily available.
Contents:
const state = new Map({
browser: new Map({
cookies: new Map({
[cookieName]: String, // value for the cookie
}),
location: new Map({
origin: String, // origin of the request
}),
userAgent: String, // UA string for the browser
}),
// ...
});This selector can be used to access cookies both on the server and the client.
This action creator can take the following argument:
| Argument | Type | Description |
|---|---|---|
state |
Object |
(required) current state of the your application |
import { getCookies } from '@americanexpress/one-app-ducks';
// ...
const cookies = getCookies(store.getState());This action creator can be used to set the User-Agent. It is used directly by One App, and it is unlikely that any module would need it.
This action creator can take the following argument:
| Argument | Type | Description |
|---|---|---|
User-Agent |
String |
(required) User-Agent to be set |
import { setUserAgent } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(setUserAgent('curl/7.35.0?'));This action creator can be used to set the Origin. It is used directly by One App, and it is unlikely that any module would need it.
This action creator can take the following argument:
| Argument | Type | Description |
|---|---|---|
Origin |
String |
(required) Origin to be set |
import { setOrigin } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(setOrigin('https://example.com'));The error duck tracks whether One App is in an error state and what the HTTP status code is for the error.
Contents:
const state = new Map({
error: new Map({
code: Number, // HTTP error code (undefined if not set)
}),
// ...
});This action creator will put the application in an error state and afterwards
addErrorToReport is dispatched.
This action creator can take the following argument:
| Argument | Type | Description |
|---|---|---|
code |
Number |
(required) This is the error code to set e.g 500, 401 refer to this |
import { applicationError } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(applicationError(500));This action creator can be used to clear the error code.
import { clearError } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(clearError());The error reporting duck is for sending client side errors to the reportingUrl configured by
the environment variable ONE_CLIENT_REPORTING_URL. You can find more documentation on environment
variables for One App in the One App documentation.
On the server the errors reported are simply logged with the assumption that the underlying
infrastructure will pick up those logs and ship them to where they can be better kept and analyzed.
Reported errors will have the following format:
({
msg: String, // Error message (error.message)
stack: String, // Error stack (error.stack) IE >= 10
href: String, // href to the page reporting the error (client side only)
otherData: Object, // Any other data included when adding the error to the report
});Contents:
const state = new Map({
errorReporting: new Map({
queue: List, // Errors to report
pending: List, // Errors that have been sent but have not returned a success response yet
pendingPromise: Promise, // From the request that posted the pending errors
retryWait: Number, // Time (ms) to wait before sending again after a failure
}),
// ...
});This action creator is for reporting both client side and server side errors to your server logs.
This action creator can take the following arguments:
| Argument | Type | Description |
|---|---|---|
error |
Object |
(required) This is the error stack |
otherData |
Object |
This is any other data that you'd like to send alongside the error message |
import { addErrorToReport } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(addErrorToReport(error, {
collectionMethod: 'componentDidCatch',
moduleID: 'my-module',
}));This action creator is used to send any pending error reports. You can use this along side
applicationError to post your own custom errors.
import { sendErrorReport } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(sendErrorReport());The intl duck is for enabling internationalization. It is used to load the language packs bundled
with each module. See usage in the one-app-locale-bundler README
for details on how to include language packs in your module bundles.
Contents:
const state = new Map({
intl: new Map({
activeLocale: String, // BCP47 code for the locale served to the user
languagePacks: new Map({
[locale]: new Map({
[moduleName]: new Map({
data: Map, // Contents of the module's language pack
isLoading: Boolean, // Indicates if the language pack request is in flight
error: Error, // Error from language pack fetch
errorExpiration: Number, // Time for error to expire so that reload attempt can be made
_loadedOnServer: Boolean, // Indicates if the language pack was initially loaded on the
// server
_pendingDeferredForceLoad: Boolean, // Indicates if the client side request of server
// loaded language pack is pending
}),
}),
}),
}),
// ...
});An async action creator for fetching your module's language pack. This action creator can take the following arguments:
| Argument | Type | Description |
|---|---|---|
moduleName |
String |
(required) Gets the language pack for the module specified. |
givenLocale |
String |
Gets the language pack for the given locale, as opposed to the locale in state. |
force |
String |
Force fetches the language pack if you don't want to use what is in state |
fallbackLocale |
String |
If the language pack does not exist, fetches this lang pack instead. |
import { loadLanguagePack } from '@americanexpress/one-app-ducks';
// ...
export default holocronModule({
name: 'my-module',
load: () => (dispatch) => dispatch(loadLanguagePack('my-module', null, null, 'en-US')),
})(MyModule);queryLanguagePack is the iguazu
equivalent for loadLanguagePack. A fallback locale can be provided if there is
a language pack you'd like to fallback to in case that the requested
language pack is not available.
This action creator can take the following arguments:
| Argument | Type | Description |
|---|---|---|
moduleName |
String |
(required) Gets the language pack for the module specified. |
fallbackLocale |
String |
If the language pack does not exist, fetches this lang pack instead. |
import { queryLanguagePack } from '@americanexpress/one-app-ducks';
// ...
const loadDataAsProps = ({ store: { dispatch } }) => ({
langPack: () => dispatch(queryLanguagePack('my-module', { fallbackLocale: 'en-US' })),
});This action creator is used to set the active locale for One App.
The promise will resolve once the
locale bundle (containing locale data for Intl.js,
React Intl) and
Moment.js) is loaded and the active locale is set. It will reject if
Lean-Intl does not have a bundle for the locale.
The locale bundles don't need to be an exact match. For instance setting the
locale to 'en-XA' will load i18n/en.js and 'zh-Hans-XB' will load
i18n/zh-Hans.js.
This action creator can take the following argument:
| Argument | Type | Description |
|---|---|---|
locale |
String |
(required) Locale provided |
import { updateLocale } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(updateLocale('be-BY'));Similar to updateLocale, but will attempt to load the locale of the requested country that is
closest to the current active locale. This is used directly by One App, and it is unlikely that any
module would need it.
This action creator can take the following argument:
| prop name | type | value |
|---|---|---|
locale |
String |
(required) Locale provided |
import { getLocalePack } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(getLocalePack('en-GB'));The redirection duck is for managing redirection of users. It is particularly useful on the server
where it is used to send a 302 response.
Contents:
const state = new Map({
redirection: new Map({
destination: String, // Fully qualified external URL to redirect to
redirectionInFlight: Boolean, // Indicates redirection has started
}),
// ...
});This action creator can be used to redirect a user out of your one app instance either on the server (via 302 response) or on the client.
| Argument | Type | Description |
|---|---|---|
redirectUrl |
String |
(required) fully qualified URL to redirect the user to |
import { externalRedirect } from '@americanexpress/one-app-ducks';
// ...
store.dispatch(externalRedirect('https://example.com'));The rendering duck controls how the server renders the HTML page sent to the client.
Contents:
const state = new Map({
rendering: new Map({
disableScripts: Boolean, // Indicates if script tags should be omitted from HTML response
disableStyles: Boolean, // Indicates if style tags should be omitted from HTML response
renderPartialOnly: Boolean, // Indicates if the response should return just the rendered HTML
// from the matched module rather than a complete HTML page
renderTextOnly: Boolean, // Indicates if HTML tags should be removed from the HTML response
renderTextOnlyOptions: new Map({
htmlTagReplacement: String, // Replace all html tags with the character passed to this option.
allowedHtmlTags: List, // List of HTML tags that should not be removed from the HTML response
}),
}),
// ...
});Use this action creator to render static markup from a holocron module, rather than a complete page.
| Argument | Type | Description |
|---|---|---|
renderPartialOnly |
Boolean |
(required) set whether a partial should be rendered or not |
import { setRenderPartialOnly } from '@americanexpress/one-app-ducks';
// ...
dispatch(setRenderPartialOnly(true));Use this action creator to render text only from a holocron module, rather than a HTML.
| Argument | Type | Description |
|---|---|---|
renderTextOnly |
Boolean |
(required) set whether to return text instead of HTML |
options |
Object |
Replace html tags with the character passed to this option i.e. '/n'. Defaults to empty string. |
options.htmlTagReplacement |
String |
Replace html tags with the character passed to this option i.e. '/n'. Defaults to empty string. |
options.allowedHtmlTags |
Array |
Comma separated list of HTML tags that are allowed to remain in the text response i.e. ['a','strong']. Defaults to empty array. |
import { setRenderTextOnly } from '@americanexpress/one-app-ducks';
// ...
dispatch(setRenderTextOnly(true, { htmlTagReplacement: '\n', allowedHtmlTags: ['a'] }));Use this action creator to disable scripts for being added to the rendered page.
| Argument | Type | Description |
|---|---|---|
disableScripts |
Boolean |
(required) set whether scripts should be disabled |
import { setDangerouslyDisableScripts } from '@americanexpress/one-app-ducks';
// ...
dispatch(setDangerouslyDisableScripts(true));Use this action creator to disable scripts and styles for being added to the rendered page.
| Argument | Type | Description |
|---|---|---|
disableScriptsAndStyles |
Boolean |
(required) set whether both scripts and styles should be disabled |
import { setDangerouslyDisableScriptsAndStyles } from '@americanexpress/one-app-ducks';
// ...
dispatch(setDangerouslyDisableScriptsAndStyles(true));We welcome Your interest in the American Express Open Source Community on Github. Any Contributor to any Open Source Project managed by the American Express Open Source Community must accept and sign an Agreement indicating agreement to the terms below. Except for the rights granted in this Agreement to American Express and to recipients of software distributed by American Express, You reserve all right, title, and interest, if any, in and to Your Contributions. Please fill out the Agreement.
Please feel free to open pull requests and see CONTRIBUTING.md to learn how to get started contributing.
Any contributions made under this project will be governed by the Apache License 2.0.
This project adheres to the American Express Community Guidelines. By participating, you are expected to honor these guidelines.