Description of icon
Flex UI
API Reference

Store

Manage Flex UI redux store

applyFlexMiddleware(enableReduxLogging?, arg?) => StoreEnhancer#

Applies Flex middleware to redux store

Parameters:

  • enableReduxLogging?: boolean

    If redux logging should be enabled

  • arg?: History | HistoryType | HistoryParams

    instance of History, type of a history (memory, browser) or parameters for getHistory() function

Returns:

  • StoreEnhancer

    StoreEnhancer

Example:

const myReduxStore = createStore(
reducers,
compose(
applyFlexMiddleware()
)
);
Î
import createMemoryHistory from "history/createMemoryHistory";
const history = createMemoryHistory();
const myReduxStore = createStore(
reducers,
compose(
applyFlexMiddleware(history)
)
);

FlexReducer(state, action) => AppState#

Flex reducer for Redux store. Use key flex in your redux store for Flex state.

Parameters:

  • state: AppState

    state of the application

  • action: any

    Action

Returns:

Example:

import { FlexReducer, applyFlexMiddleware} from "@twilio/flex-ui";
const reducers = combineReducers({
flex: FlexReducer,
myApp: myAppReducer // application reducer
});
const myReduxStore = createStore(
reducers,
compose(
applyFlexMiddleware()
)
);

flexStoreEnhancer(originalCreateStore) => EnhancedStore#

Store enhancer which allows the user to add any additional reducers after the store has been created.

Parameters:

  • originalCreateStore: any

    the original create store

Returns:

  • EnhancedStore

    It returns enhanced store with an additional addReducer method.

    • addReducer?: function - Function used to add reducer to an already created store.

Example:

Import Flex from "@twilio/flex-ui";
const myReduxStore = createStore(
reducers,
compose(
applyFlexMiddleware(),
Flex.flexStoreEnhancer // <-- Add enhancer part of compose
)
);
Flex.Manager.create(configuration, myReduxStore as any).then(manager => {
ReactDOM.render(
<Redux.Provider store={myReduxStore}>
<Flex.ContextProvider manager={manager}>
<Flex.RootContainer />
</Flex.ContextProvider>
</Redux.Provider>,
container
);
});

Need some help?