What is a good way to create a shared context for Web Components in a parent-child situation using Redux? - redux

When using Redux with React we're able to use react-redux which internally uses React's context API to make the store available to all HoCs created with connect.
I'm playing around with Web Components to evaluate how feasible it is to use primarily Web Components for building your application but still wanted a way to deal with state management (in Polymer they recommed using the mediator pattern and Redux is a type of global mediator).
So far I'm able to have a component create the store and pass it to a child component to use. This has the limitation that I will need to pass around the store to every container component, and even pass it through presentational components if they need to then pass it to another container.
So what I want to achieve is a way to make the store available to all container components that live under the Store component in the tree, preferably without making the store a global variable.
I imagined creating something similar to the react-redux connect component but since that one relies on React context I'm trying to find ideas for how to create a shared object.

Wrapping your class in an iife function and declaring a variable outside of the scope of the class as well as assigning a property of the class to the external variable will create a singleton mechanism for sharing data between instances of an element. You would then include that element inside of the template of any other element and bind to it normally. Here's an example: https://github.com/firmfirm/f-singleton/blob/master/f-singleton.html

Related

Redux: How to create a new Redux store for separate child react components

I have a react component I'm importing into my project. Both my main project and the component use separate redux stores. Initially the component was just imported once and this had no issue, but when it's imported twice it uses the same redux store for both children.
How do I ensure that two imported children from the same library, that use redux, each use a separate redux store? Alternatively, what's a better solution? I tried trying to refactor how the store is used but didn't have much luck.
In the log I can see that the redux store is initialized only once on page load.
Redux is a global store. It is meant to be used as one store per application. While there are ways around that, documented here under "custom context", it is highly advised not to do that.
If you are using the same component twice with the same props, it should also use exactly the right data. If that is not the case, you likely should not be using a global state from the beginning, but keep that state as component-local state in those two components.

Custom Web Components setting properties in connectedCallback

I have posted a similar question on Salesforce stack where the context is Lightning Web Components(which is just an extension of HTML Web Components). I am asking here because I would like to reach a wider audience.
In their documentation they say that it is not recommended to get/set properties of a custom component in the connectedCallback() hook. Does anyone here know why would this recommendation be given, as I use this hook specifically for getting/setting properties.
There is no problem with reading or setting properties with connectedCallback callback handler. The original guidelines has to do with the fact that props can change after connectedCallback and this function is executed only when component is attached to the DOM tree. It means that your code will not be able to properly handle the reactivity.
It is not a technical constraint per se; it more like good architectural guidelines when dealing with web components.
General rule of thumb:
Use connectedCallback for one time stuff like templates, setting up observations (ensure that observations are cleaned up in disconnectedCallback.
Use getters and setters for managing the property watchers. Also, do not handle async workflows within setters. Example Promise.then(), etc. The reason for this is to properly handle the cancellation for already running requests when prop changes. Thus use observables preferably set in connectedCallback.

How to create reusable components in Next.js

I am not sure if I am missing something within the Next.js documentation, but it seems as if it is unfeasible to reuse components within a Next.js application without breaking the component.
So from my understanding:
Next.js uses SSR to fetch data at a pages level by either getStaticProps, getStaticPaths or getServerSideProps.
Once this data has been fetched it is returned to the page via props.
The page then has access to the props and can then handle this data however it wants.
In order to use the SSR techniques for child components of our page we have to grab the child components data at page level and then pass this data down to our components.
This raises some concerns for me and questions:
This means our children components always have a dependency on the parent page?
We can't reuse our components on other pages without repeating logic or breaking components?
How do I reuse components without client side rendering?
Could I just grab everything at the entry point of the app and then store this in various state variables using Redux and call them at component level when needed?
By using client side rendering it sort of defeats the purpose of using Next.js. Yes, I can just use a useEffect hook to grab the data at component level but this doesn't seem right to me.
Am I missing something in the architectural pattern or is this just a vulnerability when working with Next.js?
The more I think about this the more I realise Relay and GraphQL are the future.

How can a module componenet use redux stores without importer having to add it's reducer to the store manually?

I'm trying to write module UI components that can be imported and used by any container that wants it. The tool I'm writing allows a user to click on an element and the information of the element should display on a seperate panel, this feels like an obvious case of using redux to update an element-key value in the store whenever a click action is used which will update the display panel.
However, I'm not certain how to use the store. If I was writing this as part of an app I would create a reducer for the component then manually add that reducer to my reducers.js file (created by reduxbootstrap) and magic would happen. However, as a component I expect to import into multiple other apps I would prefer not to require each app to have to import the reducer and manually add it to their list of reducers for the component to work.
Is there a cleaner way of getting my component to plug and play with an existing store? Ideally I want someone to be able to import it and use it immediately in their UI.
The one way I know that would work is to not use redux at all, i could make the interaction work internally to the component without using redux stores at all, but it feels odd to intentionally write a non-redux component to be used in a redux app.
I don't think there is a way without you exposing your reducer to be included manually in the app root reducer. A lot of popular libraries like redux-form and react-router-redux follow this approach which I think it gives the app developers more control over their redux store.

Flash - Definition of a Component?

is there a standard rule or best practice which dictates when a custom class/library should be a used/distributed as a component or remain simply as a class/library?
what's the definition of a component?
I often use component as synonymous with "Class". Any class is a component.
Many people refer to components, specifically, as UI Components. In the context of Flex, this is probably any component that extends UIComponent.
You should put a component it in a separate class library if you want to use the component across multiple projects. Or when you want to distribute the component to other developers independent of an application.
In some cases, you may consider using components for parallel development purposes, so that two developers can build different pieces of the same application in isolation of each other.

Resources