Share a piece of Redux state with custom functions only when its value has become stable

[chengtie]

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
}

const FunctionsStart: React.FunctionComponent<FunctionsStartProps> = ({ settings }) => {

  useEffect(() => {
    OfficeRuntime.storage.setItem("shared-settings", JSON.stringify(settings))
      .then(() => { console.log("settings updated in OfficeRuntime.storage by FunctionsStart") })
      .catch((error) => { console.error("Error updating settings in OfficeRuntime.storage by FunctionsStart:", error) });
  }, [settings]);

  return (<div></div>)
}

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

Inside a custom function f, we use OfficeRuntime.storage.getItem("shared-settings") to get the value of settings.

When the component FunctionsStart is loaded, settings in the Redux store first has initialValue, then it quickly changes to stableValue. Our tests show that the first time we run the function f (which triggers the loading of FunctionsStart), the value of settings is initialValue; the second (and following) time we run the function f, the value of settings is stableValue.

However, what we would like to achieve is that inside the function f, we always get stableValue, even from the first time of the execution. We would like to run the body of the function f only after the properties of FunctionsStart has become stable.

Does anyone know how to achieve that?

[ruijiaMS]

Hi @chengtie,
Thanks for letting us know this issue. Loading taskpane page will not influence the registration of custom functions. Could you please have a try with that starting the taskpane first and ensure the component Functionstart is loaded, and then execute your custom functions. If it still comes up, maybe the storage is not used correctly or could you please share the whole file link for use so that we can have a try locally?

[chengtie]

Hello @ruijiaMS , thank you for your reply.

First, I don't even understand the purpose and the workflow of Functions.Taskpane.Url of SourceLocation. In my case, I did not implement a button to open Functions.Taskpane.Url (i.e., ourdomain.com/#/functions) in the taskpane. I have the following questions:

1. What's the purpose of Functions.Taskpane.Url in SourceLocation?
2. My tests show that the first time when a user runs custom functions in their workbook, Functions.Taskpane.Url is systematically loaded. Is it true?

Cheers

[ruijiaMS]

Thanks for your reply!
For your questions:
1, the Functions.Taskpane.Url is for loading the runtime of custom functions, and there is a script tab which is for include the runtime.
2, It depends on shared runtime and js runtime. For shared runtime, it will be loaded in advance; While for non-shared runtime, the runtime of custom functions is included from function.html and only running custom function does not need load the taskpane.html.

There are two helpful link that contains more details about shared/non-shared runtime and the usage of SourceLocation:
1, https://learn.microsoft.com/en-us/office/dev/add-ins/testing/runtimes?source=recommendations
2, https://learn.microsoft.com/en-us/office/dev/add-ins/develop/configure-your-add-in-to-use-a-shared-runtime