在redux容器中使用store.getState（）是否正确？

Question

I need to access a property in the store before dispatching an action, in the container (code shown below) I am accessing using it using store.getState() .

I would like to know if it is correct or a more appropriate way exists.

import { connect } from 'react-redux'
import LocationFinderSearch from './locationFinderSearch'
import { getLocations, setSearchValue } from './locationFinderSearchActions'
import store from '../app/store'

const mapStateToProps = (state, ownProps) => {
  return {

  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onLocationSearchClick: (e) => {
      e.preventDefault()
      let value = store.getState().locationFinderReducer.locationFinder.ui.inputValue
      dispatch(getLocations(value))
    },
    onLocationInputChange: (e) => {
      e.preventDefault()
      let value = e.target.value
      dispatch(setSearchValue(value))
    }
  }
}

const LocationFinderSearchContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(LocationFinderSearch)

export default LocationFinderSearchContainer

Answer 1

I think your first instinct should be to map the value from you state to a component prop like this:

const getInputValue = state =>
  state.locationFinderReducer.locationFinder.ui.inputValue

const mapStateToProps = state => ({
  inputValue: getInputValue(state),
})

Now that you have the inputValue in the components props, the question is how to use in your dispatch functions?

For this I would encourage you to put the immediate event handling (preventDefault and target.value) inside your component. This makes the mapDispatchToProps object much easier, puts the event handling encapsulated in your component and finally solves your problem of not using getState().

Your mapDispatchToProps becomes:

import { getLocations, setSearchValue } from './locationFinderSearchActions'

const mapDispatchToProps = {
  getLocations,
  setSearchValue,
}

The LocationFinderSearch component has to handle the events now and has access to the inputValue in this.props.inputValue:

class LocationFinderSearch extends React.Component {

  ...

  onLocationSearchClick = (e) => {
    const { getLocations, inputValue } = this.props

    e.preventDefault()
    getLocations(inputValue)
  }

  onLocationInputChange = (e) => {
    const value = e.target.value
    const { setSearchValue } = this.props

    e.preventDefault()
    setSearchValue(value)
  }

  ...
}

I hope this answer will help you.