Hello, I'm trying to use `useDispatchDashboardComm...
# gooddata-ui
s
Hello, I'm trying to use
useDispatchDashboardCommand
to interact with a dashboard embed but i'm always faced with the following traceback:
Copy code
Cannot read properties of null (reading 'store')
TypeError: Cannot read properties of null (reading 'store')
    at useStore (<http://localhost:3000/static/js/vendors-node_modules_mui_material_ListItemButton_ListItemButton_js-node_modules_react-redux_e-57d794.chunk.js:1482:32>)
    at useDispatch (<http://localhost:3000/static/js/vendors-node_modules_mui_material_ListItemButton_ListItemButton_js-node_modules_react-redux_e-57d794.chunk.js:1219:17>)
    at useDispatchDashboardCommand (<http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_AssignmentIndRounded_js-node_modules_mui_icons-materi-c61b61.chunk.js:328685:100>)
this is the kind of line triggering the issue:
Copy code
import {
  resetAttributeFilterSelection,
  useDispatchDashboardCommand,
} from "@gooddata/sdk-ui-dashboard";
[...]
  const resetAttributeFilter = useDispatchDashboardCommand(resetAttributeFilterSelection);
As soon as this line is hit, the traceback happens. Is there some kind of prerequisite i'm missing? our dependencies are the following:
Copy code
"@gooddata/sdk-backend-tiger": "^9.3.0",
    "@gooddata/sdk-ui-dashboard": "^9.3.0",
and it is also failing with 9.1.0. Thanks in advance
r
Hey there Simon, Radek from the GoodData technical team here - let me have a look and come back to you! 🙂
s
@Radek Novacek thank you, let me know if i can help
@Radek Novacek is there a way for me to present you with a minimal failing exemple, with codesample or similar? i'm willing to work on that but since it requires a gooddata cloud backend, i'm just not sure how to proceed.
r
Hey Simon, realistically the code sample should be enough - I can use my own backend, and I should be able to work out the references for everything 🙂 If you can share it via PM, that would be excellent!
s
@Radek Novacek hello! i had some time to dig a bit onto this issue and found some references in the gooddata ui sourcecode that an additional react redux context is necessary to play with the dispatch commands. Can you confirm this finding? Are there any snippet of codes somewhere that shows a minimal working example of that? thank you
r
Hey Simon, can you elaborate on that? I can verify with the devs 🙂
s
I would like to elaborate more, but I'm still stuck at same place I was when opening the thread: when trying to use
useDispatchDashboardCommand
. The error raised as shown here is related to a missing store and some places in the gooddata-ui-sdk source seem to refer to an extra react-redux store that needs to be explciitely passed, but I'm unsure and can't find any working example. If you could get some dev's input on the subject that would be very valuable to me 🙏
👀 1
r
Hi Simon, I finally also had the time to dig deeper here: So first and foremost, you're correct on react-redux - this is because the Dashboard component is partially built on Redux and Redux-Saga. When using commands, these are essentially Redux actions. Now, for the actual code, I believe the part that is causing the
Cannot read properties of null (reading 'store')
error is coming from the fact that that calling
useDispatchDashboardCommand
runs
useDashboardDispatch
(from DashboardStoreProvider.tsx), and that comes back with a null value for the store because it's missing the necessary context - either a dashboard, workspace, backend, so on. Fortunately for both of us 🙂, we do actually have an annotated working example of a Dashboard component with the use of dispatch commands! It's available here: Component library. I would absolutely recommend bookmarking this site, this is what I tend to refer to for a lot of customer use-cases as well. Hope the above helps! 🤞
s
great, thank you so much 🙂 i will try this and go back to you, but it seems to be what i was looking for! have a good day
r
You too Simon, fingers crossed 🙂