0

What is the proper way to make an async request for form drop down options?
Have a large amount of drop down options, say cities for sake of example. Do we want these stored in state?

Normally we would create Redux action making request for "cities" and update state with "cities" options via Redux store. MapDispatchToProps and call Redux action from componentDidMount. 

componentDidMount = () => {
  this.props.fetchCitiesOptions()
}

MapStateToProps would include options: cities which could be 1000 cities or more and only in use on 1 form. Do we want to carry this in global state? If not, what is the better way? Learning. Thanks.

csi
  • 9,018
  • 8
  • 61
  • 81
  • I would use something like https://www.npmjs.com/package/react-async-autocomplete to achieve this – Panther Apr 11 '17 at 15:34

1 Answers1

0

You can choose to have local state for just this form element. If you would like a controlled component, but do not want/need the options to be in the global state, create a wrapper component for your form to keep track of local state and update just the local state in your componentDidMount. You can mix/match local and global state depending on where that state is needed in your project. This local state can also keep track of form changes and submits if you do not need the form submission data in the rest of your project state.

Corryn Young
  • 1
  • 1
  • Is it good design practice to have async calls outside of Redux actions when using React w/ Redux? – csi Apr 11 '17 at 16:10