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.
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 creating a component that displays details about an item chosen from a list - here's a diagram that illustrates the current architecture:
Here's how it works:
ItemList.js makes a call to Firebase via a Redux action creator/reducer, returning a list of all items
Our user taps an item, and react-native-router-flux passes all the chosen item as props to ItemView.js
ItemView.js passes an array of attributes from this.props to ItemDetails.js, which renders them in a UI card
This approach works OK for displaying attributes, but now I want to reuse ItemView.js to allow users to edit attributes and save their changes - what's the best approach here?
I thought I'd create an edit toggle in this.state, store any changes to the input fields in this.state, and then fire an action creator to update the entry.
My concern is that the attributes are originally in this.props, so switching between props and state for edit mode feels a bit iffy.
I considered using an action creator to update this.props with changes, but I can't see how that would work, given the props displayed in ItemDetails.js are passed all the way down from ItemList.js.
I am trying to add multiple Slate.js text editor fields into one page. So far my main component contains a button which when clicked appends a slate value to an array slateValues in my redux store. In the render function I then map over that array and for each entry return a SlateEditor component which essentially renders the standard Slate Editor component with some custom formatting/functionality.
My problem is that Slate uses an onChange function to process changes to the value. Handling those changes in the local state works fine, but how can I pass that into the redux store? Updating the redux store directly in the onChange causes the parent component to re-render which then ends up in an endless loop (I assume this then triggers the onChange again, which triggers a re-render etc.).
I initially passed down the values as props into the SlateEditor component, then tried to directly read the value in the child component (SlateEditor) from the redux store.
My final aim is to store the slateValues as a "block" in a database. Any ideas on how to fix this? Thanks
I had similar issue.
What I did was I did not map over the array of slate values.
Instead I had another array of (my case) editorsNamespaces=[....] also I pass to the Slate editor wrapper component a selector (ie: selectSlateValueByEditorByNamespace) and a onChangeHandler(newValue, nameSpace).
By doing that my parent component will not re-render all editor because editorsNamespaces array will never change, and only particular editor will re-render when value has changed.
So i'm fairly new to React and I can't wrap my head around a concept on how to re-render a main component based on another component.
Lets say we have a to-do application and a to-do item can have a state (new, running, closed). We are displaying all to-do items in a list and we can filter the items based on their state. We are using a bootstrap dropdownbutton like component to set the filter, which is a React component. Now when we change the filter we obviously want to refresh the to-do items.
My question is, does the logic of the selected state belong in Flux/Redux or does the filter component just say "refresh your items" to the main component?
When you use Redux in React application, follow one simple rule - all your components are stateless (means, no component initializes its state or calls .setState() anywhere).
The redux way of design based on state container, one big object that holds all application state. As React component, being connected to Redux store, Redux will pass the state (or portion of it) into that component, as this.props.state property.
That high-order component (or smart component), renders its children components (or dumb components) and handles events from them.
If child component requires change, it triggers corresponding handler (which typically passed as props). The only way to change the state is to dispatch an action. That action contains a type and a payload and based on that type, corresponding reducer is selected. The reducer then produces a new state, based on previous state and action payload.
If in the result of reducer call, state got changed, Redux will re-render high-order component, passing new state in properties. So, all child components will be updated correspondingly.
Check this example and trace how AddTodo component calls .handleClick() and then upper to .onAddClick() which dispatches an action.
If you are using redux, then on your dropdown you should have an onchange handler that dispatches an action every time the value is changed with the selected state (new, running, closed).
Redux reducer will handle this action by changing some state accordingly in the store for example: display = 'completed'. In addition to this, your todo list should also be stored in the store and it will likely be an array.
Your react component should receive a the todo array and display as props, and therefore everytime any prop (todo array or display) change, it will trigger a re-render.
In this case, your component should only display those todos that are complete (i.e. in the render you check if the state of each todo === this.props.display.
So to answer your question: redux keeps the state of the dropdown, which is passed to your main component, your main component then render only the todo's that matches the criteria.
So in a very minimal way, you could pass a function down to the select box, which calls setState on the top-level component. When that state changes, it will re-render its child components. This pattern doesn't scale well, and leads to the same hell React + Flux is trying to get us away from (state everywhere). I would say, using Flux (or even better, Redux), trigger an action that sets the filter in your store, and use derived data based on the filter state + your list of todo's in the todo list.