I working on my web app
I set there a store with react redux,
I have a form with 4 input type number which after pressing a button dispatching to the store as an array, then I have some others inputs that I’d like to get a value of the first 4 as a placeholders but when I change the value it should update the right place in the store , here is my problem , when I change its value (by typing) it change all the values in all the arrays connected in the store
It’s like the store works both sides , is there way to stop it ?
Thank you
It's hard to tell what your exact problem is without any code, but it sounds to me like you are overwriting the whole state of your array. Again, I can't be sure without code, but my suggestion is you spread existing state, and add your new array or whatever it is to the end in your reducer where that action is defined.
return [...state, action.newData]
Related
I'm dealing with many fields on one page, some of them are connected, some of them are not. You can simple imagine it as a Page with fields, or something like this. I know there is two ways of handling the state of the input(storing its value):
storing inside the Redux's store
saving in local state and then dispatch it to the Redux's store on some event(like save button)
I really like the way of Redux and how it handle things and its single source of truth, but the thing is that if I do go with the first approach, I will need to dispatch an action every single time I change a key in input field. Is this me or does it really looks insane? To set a single input, I will need to dispatch around 50-100 times. What if this a longer message, like some post's textarea field?
I thought of throttling or debouncing, but really don't want to make it this way.
Can you please suggest something? Thanks
I wish to update particular input value, I suceeded to do so with one dimensional array but unfortunatelly in my case 2d is necessary and I have no idea how to do so as I tried already all combinations of rows and cells.
Here is link to demo -> https://codesandbox.io/s/stoic-mirzakhani-46exz?file=/src/App.js
Basically, thing is that after typing some value to for example X-axis in first row, I wish only this field value to be updated. I have button which can add new row to inputValue which contains all input titles, and contents.
Another thing is that if I write something to the input now, it transforms aray into object and because of that app crash
Alright, so you had a few issues going on here, but overall it was a good effort!
You were attempting to update the state directly instead of using the mutation function provided by array destruction and hooks
In the state update, you were not merging objects properly leading to the same value to be passed
You were not using props properly
To address these I made a new input component that tracks each component row and col inside its props. Then these values will be used alongside the prop drilled mutation function and retrieved content value from your chunk component.
Please let me know if this is not working
Below is a link to the working version, please look at the console to see the updates and there is a button that will print the current value of inputValue for you as well. State now also updates as you enter.
Edit: I have addressed your comment and fixed the example so that it follows your request. I went ahead and switched to using the useReducer hook instead now as it makes the logic a little easier to understand and to read in my opinion. Feel free to try to figure it out with useState too, if you wanted to do that. For now, though here is the link again: https://codesandbox.io/s/prod-resonance-wokey?fontsize=14&hidenavigation=1&theme=dark
In my application I have a dialog window on which there are multiple input fields. What I want to do is to save user's input in the component's own state and only afterwards, say, inside "onClose" of the Dialog send the input to a redux store using "dispatch" function.
This way the dialog component would keep field data inside its own state.
The problem that I face is that I'm not sure what the best way is to rebuild dialog component state from information contained in the redux store.
If one refreshes the page with F5 or simply reloads it, then components lose their state and fields will appear blank, regardless of the fact that rehydrated redux store still contains valid input information.
The question is then, what is the best way to set components state from props? Moreover, doesn't it seem like an antipattern? What are some common techniques for such task?
One possibility is to set field values directly to those contained in "props". This would, however, imply that every small change of the input fields will result in copying and modifying redux store, which is slow & inefficient.
Usually building a state from props complicates code a lot, you have to map props both in constructor and getDerivedStatesFromProps.
I prefer to write component functions which return value based on passed props.
As you mentioned it may impact perfomance, to fix it you can use memoize-one library.
For more details you can check the following answer
Typically, when I've created a form in react/redux myself, I have managed the inputs as 'controlled components', meaning when an input box changes, it calls a function that updates a variable that is fed back into the input. Of course, for me, this is the crux of redux, it's the flow.
However with redux-form, it seems I have no ability to do this on each of the fields. Almost as if, the fields are controlled, but within redux-form's own world, as far as I'm concerned they're not controlled as I'm not passing a value and re-acting to a change with a callback.
This is causing me a problem, as I may have something else that updates those input fields. For example a postcode lookup might update an address's fields. Before I transitioned to redux-form, the 'flow binding' meant I could update those fields from a different reducer as they essentially just represented a live slice of the redux store.
How do I get around this?
Edit: I think the best approach might be to use this https://redux-form.com/7.0.3/examples/selectingFormValues/, but I'm not sure
Field values of redux forms can be modified using the reducer plugin. Basically you can add your own reducer to the one of redux form anf modify forms state like values, touched etc. Check it out here:
http://redux-form.com/7.0.3/docs/api/ReducerPlugin.md/
Be aware is an advanced usage of redux and redux forms.
I have two context types: (1) productsContexts & (2) rangeContext.
rangeContext is nothing more than preset ranges from a json file so as to group the products according to each respective range.
Below is an illustration of a side-box component that groups products
according to those preset ranges and it also illustrates the problem:
The first visit to that page, everything works fine, but click off and then re-visit the page and the previous data remains and then doubles itself, 3rd time, it is triple, and so on.
I did nothing with the rangeContext data but pass it along to a local variable for mapping data manipulation. I did not save anything to the context itself.
Here is what I have tried to do to solve this problem; all have failed:
I passed the rangeContext to state first, then on componentWillUnmount, I initialized state.
I Object.assign() the rangeContext to the local variable instead of directly passing the context to the local variable.
I took the context completely out of this component and used it in it's parent, and passed it to this component as props.
Nothing is working. While the hard data does not change, the range component never gets initialized on unmount and revisiting the page just carries forward what was in the range in the last visit and adds to it.
I know I probably did not do a great job explaining, but I know the problem is related to the context and I sure do not want to hit the database again, as I already did that for an earlier component.
Does anyone recognize the problem and have a solution?
Thanks
UPDATE:
I moved contextTypes for ranges out of the side-box component.
Using redux flux, I dispatched for the range-actions in side-box's parent and passed the ranges to side-box as props. The problem went away, but I am not happy. I need someone to tell me why this is the right things to do, as ...
I had already called range-actions in a previous component, so why not put it in contextTypes instead of calling redux again?
Where as I only had 3 lines of code on side box, I have the same amount of code lines since now I am calling propTypes, but now I also have
MORE LINES of code in the parent calling redux, something I had already done for the range data in a previous component.
I would greatly appreciate someone telling me if I am still doing this
all wrong, or why it is right I had to add 26 more REDUNDANT lines of
code calling redux flux?