AEM SPA Editor with React and Redux

[toms57551463]

Does anyone have any working examples of an AEM project structure that leverages AEM's SPA editor with Redux to manage global state between components? If someone can provide me an example I can probably reverse engineer it to figure out what is wrong with my project...

I've initialised a project structure following the AEM archetype with the frontend module set to React. I've setup Redux in the usual manner wrapping my <App> component within index.jsx in the <Provider> from react-redux passing in the store. Everything works fine when I run my app using the local dev server or when I "View as Published" from AEM author. I do however seem to get the following error when viewing a page that references an AEM component mapped to a React Component that calls the useDispatch() hook. Shared.js seems to be some Granite related script.

Uncaught TypeError: Cannot read properties of undefined (reading 'setParameter')

at Object.noCaching (shared.js:561:28)

at Object.load (shared.js:2744:34)

at HTMLDocument.<anonymous> (core.js:1046:26)

at HTMLDocument.dispatch (jquery.js:5232:27)

at elemData.handle (jquery.js:4884:28)

at Object.trigger (jquery.js:5136:12)

at HTMLDocument.<anonymous> (jquery.js:5866:17)

at Function.each (jquery.js:371:19)

at jQuery.fn.init.each (jquery.js:137:17)

at jQuery.fn.init.trigger (jquery.js:5865:15)

Any advice from anyone that's used Redux on an AEM SPA Editor enabled site would be appreciated as well. 

Thanks

[kautuk_sahni]

The error message Uncaught TypeError: Cannot read properties of undefined (reading 'setParameter') suggests that the setParameter function is not defined when your React component is mounted. This could happen for a few reasons:

• The setParameter function is defined in a different module and is not being imported correctly.
• The setParameter function is defined in a global scope, but is not available to your React component because it is running in a different context.
• The setParameter function is defined in a Granite-related script, but is not being loaded correctly.

To troubleshoot this error, you can try the following:

1. Make sure that the setParameter function is imported correctly into your React component.
2. Try defining the setParameter function in the same module as your React component.
3. Try loading the Granite-related script that defines the setParameter function before your React component is mounted.

Here are some additional tips for using Redux with AEM's SPA editor:

• Use a Redux store that is persisted to AEM, so that your state is not lost when your user navigates to a different page.
• Use Redux middleware to handle asynchronous actions, such as fetching data from AEM servers.
• Use Redux selectors to normalize your state and make it easier to access from your React components.