Assuming I want to reuse a component with redux, what are my options?
In more detail:
Let's assume I have a generic list component with items and filter input. I want to use this component in 2 places. The component needs to be closed API, meaning it should dispatch and reduce the actions all within itself. It needs to handle state changes and show the filtered items as well.
Let's assume the reducers are exposed publicly to build the store.
What would be the best approach of building the state object, the reducer and the action.
The main issue is how to 'bind' each component to a different items property on the store state.
Update:
Here is a discussion very similar to my qiestion:
Using Redux in reusable React component. I commented on the discussion with a proposal I found. If it will be accepted I will post it here. Meanwhile you can answer my question with your proposals.
I'm new to Redux, and haven't tried the library yet, but MrEfrem/redux-fly seems to me as a very interesting answer to this problem.
Related
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.
I've tried to solve it in different ways but I couldn't. Is there any simple way to use Konva.js with Redux and React Hooks.
As I read about, Konva's context mechanism is different from React-Redux. And so, even though my all App in Provider wrapper, React child components that I used with Konva, doesn't see the wrapper.
When I apply Provider wrapper again in child component, inner the konva's Stage tag, the app didn't give any error and worked but reducer states entered the loop somehow. I believe the provider in child components does its job but after that global provider does its job again and changes reducer states as initial states.
To fix this I tried to add another reducer and store but the same again.
I kindly ask anyone who can help and also Dear Konva Contributors :) please give a new sample to use for 2021 with react hooks.
Turns out I should have just used ReactReduxContext.Consumer, as described below.
https://github.com/konvajs/react-konva/issues/311#issuecomment-454411007
What's the company standard? If a company decides to adopt Redux, do I need to convert every state/prop into redux form?
For example. I have a loading/setLoading state for the home page. Can't see if being used in other places. Do I need to make a redux version of actions for it?
No, as stated in the Redux style guide (general reading recommendation!), you should Evaluate Where Each Piece of State Should Live.
Not everything needs (or even should) be global data. Only use Redux for stuff that is "global". It does not replace props or local component state!
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.
When I searched for Redux most of the time I get the answer
Redux is a predictable state container for JavaScript and comes as an
external library which can be used together with front-end frameworks
like React, Angular, Ember.js, Backbone, etc.
I did not get the definition actually. What does it mean by **predictable state container **?
And as a new tool, it should solve some problems with web development. So, what redux does and how it facilitates us?
I think when someone says that Redux is a predictable state container it means that redux has a very strict way how to change the data, sometimes called unidirectional data flow.
I mostly used it in React application, so I can tell which problem it solves in this case. While your application is small, you probably will not see the reason to use Redux, but when it grows, when you have lots of components which use the same data and have to communicate with each other, it becomes really painful to store all state somewhere in the root components and pass it through all the children. There may be performance issues as well, all components between a root one a chield which needs some part of your state will be re-rendered.
So using Redux easily connect your components and select those parts of the state which they need. Also, communication between components becomes much easier, instead of passing callbacks to props, your components just listed to state and represent it, any time you need to change a state just send an action.
Regarding predictable state management, Redux is some kind of event sourcing, instead of changing a state directly, so send actions (events) which describe how to modify the state and reducer applies these changes.
There are way more things to say about Redux, at least middlewares, if you are familiar with Rx, you can try to use redux-observable which are really powerful, you can listen to some actions or a state changes to combine it with others. I recommend you to take a look at redux documentation and some article like this, I believe you will find an answer to your question.