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

在分派操作之前，我需要访问存储区中的属性，在我使用

store.getState（）

访问的容器（如下所示的代码）中

我想知道这是正确的还是一种更合适的方法

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

---

我认为您的第一反应应该是将状态值映射到组件道具，如下所示：

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

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

既然在组件道具中有了inputValue，那么问题是如何在分派函数中使用它

为此，我鼓励您将即时事件处理（preventDefault和target.value）放在组件中。这使得mapDispatchToProps对象更容易，将事件处理封装在组件中，并最终解决了不使用getState（）的问题

您的mapDispatchToProps变为：

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

const mapDispatchToProps = {
  getLocations,
  setSearchValue,
}

LocationFinderSearch组件现在必须处理事件，并且可以访问this.props.inputValue中的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)
  }

  ...
}

---

我希望这个答案能对您有所帮助。

我认为您的第一反应应该是将您的状态值映射到组件属性，如下所示：

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

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

既然在组件道具中有了inputValue，那么问题是如何在分派函数中使用它

为此，我鼓励您将即时事件处理（preventDefault和target.value）放在组件中。这使得mapDispatchToProps对象更容易，将事件处理封装在组件中，并最终解决了不使用getState（）的问题

您的mapDispatchToProps变为：

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

const mapDispatchToProps = {
  getLocations,
  setSearchValue,
}

LocationFinderSearch组件现在必须处理事件，并且可以访问this.props.inputValue中的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)
  }

  ...
}

我希望这个答案能对你有所帮助