custom widget: recommended way to pass data from action to widget.tsx

[john_cartwright_noaa]

Hello All,

I have a custom widget which is listening for a Message (e.g. DataSourceFilterChangeMessage). The logic for handling the message is in an implementation of AbstractMessageAction in the src/actions folder.  What is the recommend way to pass data captured in theAbstractMessageAction#onExecute method out to the src/runtime/widget.tsx?

Thanks!

--john

[john_cartwright_noaa · Accepted solution]

I've settled on an approach of publishing the value to the widget's store w/in the Action, e.g.

getAppStore().dispatch(appActions.widgetStatePropChange(this.widgetId, 'queryString', queryString));

and then retrieving it in the widget.tsx via the props.stateProps, e.g.

<h2>{props.stateProps.queryString}</h2>

If anyone has a better suggestion, I'd be glad to hear it.

--john

[RobertScheitlin__GISP]

@john_cartwright_noaa 

I am not really sure how you are resolving "props.stateProps.queryString" in your widget. I don't see "stateProps" in the widgets props object.

This is how I am doing it (not saying that this is necessary better).

Sending Widget :

this.props.dispatch(appActions.widgetStatePropChange(this.props.id, 'pSearchData', cTextElements));

Receiving Widget:

interface ExtraProps{
  pSearchData: any
}

....

export default class Widget extends React.PureComponent<AllWidgetProps<IMConfig> & ExtraProps, State>{
  static mapExtraStateProps = (state: IMState, ownProps: AllWidgetProps<IMConfig>): ExtraProps => {
    let wId: string;
    for (const [key, value] of Object.entries(state.widgetsState)) {
      if(value.pSearchData){
        wId = key;
      }
    }
    return {
      pSearchData: state.widgetsState[wId]?.pSearchData
    }
  }
....

//Then else where in the widget code I use the extra prop
this.props.pSearchData