Question

我需要在调度操作之前访问商店中的属性，在容器中（下面显示的代码）我正在使用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

Answer 1

我认为你的第一直觉应该是将你的状态值映射到这样的组件道具：

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)
  }

  ...
}

我希望这个答案可以帮到你。

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

1 个答案: