I have form with search criteria and result table. we have implemented redux. so the search will go through reducers and return the updated state with response.
Do we need to keep the property of search criteria (name, number) also be part of the redux state ? if so how we handle the onChange input fields.
Else still need to keep the local state and onChange will handle using setState for input form fields?
I am looking for right approach, where we need to keep the input form fields value in redux state/local state
Related
I want to store the value of fields, upon update, in a redux state property. Is there a way to do this globally for all the form data or do I need to dispatch a separate reducer for each controlled component upon onChange/onValueChange/onTextChange?
By the way, I'm working in React Native, if that matters (thus using some specific patterns such as control instead of register).
Extra info about my form and redux state:
my form has nested children, each containing various custom controlled components. In each of those controlled components, the local form state is updated accordingly (either by passing the new value to setValue if it's a custom input).
After getting my local form data updating properly, I persisted the state in redux by dispatching a reducer in onSubmit. Because this form creates data associated with one item from a list of items, the reducer stores the form data in a parent object located at state.listOfItems[index].formData.
I’m new to React and Redux. I have a redux form with several fields. In my Redux DevTools I can see my form and all its “values” and watch input changes. After the user has input all required data, clicking the “submit” button updates the Redux state with the new data via an action. All of this is working.
While the user is inputting data and prior to submitting changes, I have a requirement that when the user makes changes to a certain field, I need to change the displayed value of another field. More specifically prior to updating the form’s state, when a user inputs a change to field “A” I need to retrieve the form’s displayed value of field “B”, do a calculation and then display the result in field “C”.
Is there a way to access my Redux form’s displayed values”? How do I programmatically update a displayed Redux form field value?
If you look in Redux DevTools, you can see the actions that are dispatched by redux-form:
You can actually dispatch those actions yourself to set values programmatically:
import { change } from 'redux-form';
// snip...
change('form-name', 'field-name', 'new-value');
You can view all redux-form action creators here: https://redux-form.com/8.2.2/docs/api/actioncreators.md/
I'm using Formik to create form in my react app. There are few tabs on view, and all of them contain same form (form with same fields). I want some fields to be remembered while user switches tabs. What came to my mind is to save values into Redux on field onChange event but according to Formik documentation it is not recommended to save Formik values into Redux state.
Also, on form submit, I want these values to be cleared/reset. What would be the best approcah?
when switching tabs you can pass initialValues to the new form.
you can store it in Redux and provide the stored data to initialValues
you can store it in upper state and provide the stored data to initialValues
The trick is do not store actual values but create at runtime an object to use as initialValues
I'm wondering what is the best way to implement CRUD operations in React Redux in case of List of entities.
Requirements:
1. Every row contain an entity
2. Changing a value in a text input trigger a PUT call to BE
3. Every row has Delete operation trigger a DELETE call to BE
4. Form has an ADD action trigger a POST call to BE
Notes:
1. No single Submit button
I thought about Redux Form for that but since I don't have a single submit operation I find it less appropriate (Feel free to correct me)
You can use Redux Form for that. If you setup a validator for the form, you can define if a field is dependent on another. Redux Form will run this validator for each change in any field.
You can setup something like Redux Observable or Redux Thunk to submit the form on Redux Form's CHANGE action when there are no validation errors in the form.
This way, you will submit the form on change, only if all the related fields are also filled.
I'm new to Redux. This is how I would do it. I will keep a state in the reducer which is called "personList". I will put all components in a container and map the personList to a property of the container called "propPersonList". When I create the ListItemComponent, I would also pass the index of the person in the list to the component as a property "propIndex". The onChange handler of the two inputs will dispatch an action with payload {index: this.props.propIndex, value: event.target.value}, then trigger a PUT request to backend (use lodash module to throttle it instead of triggering it everytime the input changes). The reducer will take care of the actions and update the state according to the payload. The add button will dispatch another action and the reducer will simply add an empty entity to the state, then trigger a request to the backend. The remove button will dispatch an action with the index as the payload, and the reducer will remove the corresponding entity from the list.
My intention is to create a multi selection component using react-select. I'm not able to get around a small problem with react-select. I need the follwing stuff to be in the flux store.
The values already selected by the user. This is passed via the valueArray property
The values to be populated in the selection list. This is passed via the options property
When the user types something in the input box, this input value is captured using the onInputChange hook and this raises a flux action which updates the store with the new list of values to be populated and emits the change event. Now the problem is that when the change event is emitted, the component gets re-rendered with the selected values and the new set of options. When this happens, the value that the user was typing for filtering options gets lost(as the valueArray) gets re-rendered. Is there any way of retaining the filter text in react-select without moving the options fetching outside the flux store?
Exist two places where you can store the state:
* In the state Component
* In the store
For this concrete case, you can save the selected values in the Component state and assign to ve value prop of react-select.
onChange func:
this.setState({value: whatTheUserIsWritting});
React Select Component:
<Select value={this.state.value}/>
With this solution if you rebuild the Component you will lost the state. In this cases you have to use external you flux store.