Dispatch an action from custom functions

Question

We have an add-in built with ReactJS, redux, and redux-saga. Now, we are adding custom functions to the add-in.

In our manifest, we have the following setting, where Functions.Taskpane.Url points to a webpage ourdomain.com/#/functions.

<ExtensionPoint xsi:type="CustomFunctions">
    <Script>
    <SourceLocation resid="Functions.Script.Url"/>
    </Script>
    <Page>
    <SourceLocation resid="Functions.Taskpane.Url"/>
    </Page>
    <Metadata>
    <SourceLocation resid="Functions.Metadata.Url"/>
    </Metadata>
    <Namespace resid="Functions.Namespace"/>
</ExtensionPoint>

The page ourdomain.com/#/functions is built with ReactJS and Redux. It's like

declare var OfficeRuntime;

interface FunctionsStartProps {
  settings: any;
  key: string
}

const FunctionsStart: React.FunctionComponent<FunctionsStartProps> = ({
  settings, key
}) => {
  console.log("FunctionsStart");

  return (
    <div></div>
  )
}

export default withTranslation()(connect((state: ReduxState) => ({
  settings: selectors.settings.getSettings(state),
  key: selectors.settings.getKey(state)        
}))(FunctionsStart));

We write all our custom functions in functions.js. In one function, we would like to write a logic such that if this function is executed, we dispatch an action to modify the value of key in the Redux state.

If it was inside a webpage, dispatching an action would be for instance this.props.dispatch({ type: 'settings/setKey', payload: "newValue" }). But we don't know how to trigger this from functions.js.

Does anyone know how to achieve that?