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
);
});
Rate this page

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.