没有触发 Redux 操作

Question

Redux action changePictogramsKeyword 没有被触发。

这是我定义动作和减速器的文件 (redux/module/keyword.js):

export const CHANGE_PICTOGRAMS_KEYWORD = 'CHANGE_PICTOGRAMS_KEYWORD'

export function changePictogramsKeyword (keyword) {
  return {
    type: CHANGE_PICTOGRAMS_KEYWORD,
    keyword
  }
}

// Updates error message to notify about the failed fetches.
export default function pictogramsKeyword (state = '', action) {
  switch (action.type) {
    case CHANGE_PICTOGRAMS_KEYWORD:
      return action.keyword
    default:
      return state
  }
}

我的根减速器：

import { combineReducers } from 'redux'
import { routerReducer as router } from 'react-router-redux'
import locale from './modules/locale'
import errorMessage from './modules/error'
import pictogramsKeyword from './modules/keyword'
export default combineReducers({
  locale,
  router,
  pictogramsKeyword,
  errorMessage
})

因此，使用 devTools，我可以检查我的 initialState 是否符合我对 rootReducer 的预期：

locale:"en"
router:{} 1 key
pictogramsKeyword:""
errorMessage:null

这是我连接到 Redux Store 的视图的代码。组件 SearchBox 负责触发动作 changePictogramsKeyword:

import React, {Component, PropTypes} from 'react'
import SearchBox from 'components/SearchBox.js'
import { connect } from 'react-redux'
import { changePictogramsKeyword } from 'redux/modules/keyword'


class SearchPictogramsView extends Component {

  handleDismissClick (e) {
    this.props.resetErrorMessage()
    e.preventDefault()
  }

  render () {
    const { children, inputValue } = this.props
    return (
      <div>
          <SearchBox value={inputValue} onChange={changePictogramsKeyword} />
          {children}
      </div>
    )
  }
}

SearchPictogramsView.propTypes = {
  inputValue: PropTypes.string.isRequired,
  children: PropTypes.node
}

function mapStateToProps (state, ownProps) {
  return {
    errorMessage: state.errorMessage,
    inputValue: state.pictogramsKeyword
  }
}

export default connect(mapStateToProps, {
  resetErrorMessage, changePictogramsKeyword
})(SearchPictogramsView)

这是搜索框组件的代码。自动完成是一个 material-ui 组件。每次我按下一个键时都会触发 onUpdateInput 方法，但是不会触发 changePictogramsKeyword（我通过开发工具看不到任何东西）

import React, {Component, PropTypes} from 'react'
import AutoComplete from 'material-ui/lib/auto-complete'
import RaisedButton from 'material-ui/lib/raised-button'


class SearchBox extends Component {
  constructor (props) {
    super(props)
    this.handleUpdateInput = this.handleUpdateInput.bind(this)
  }

  handleUpdateInput = (t) => {
    console.log(t)
    this.props.onChange(t)
  }

  render () {
    return (
      <div>
        <AutoComplete onUpdateInput={this.handleUpdateInput} searchText={this.props.value} />
      </div>
    )
  }
}

SearchBox.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired
}

export default SearchBox

Answer 1

现在，您的操作只会被调用，但不会被分派，因为您没有在 connect() 调用中正确映射操作。（有关详细信息，请参阅 official documentation）

在您的 SearchPictogramsView 中，将 connect() 调用的 mapDispatchToProps 函数更改为 return 具有包装函数的对象：

export default connect(mapStateToProps, (dispatch) => {
  return {
    resetErrorMessage: () => dispatch(resetErrorMessage()),
    changePictogramsKeyword: () => dispatch(changePictogramsKeyword())
  };
})(SearchPictogramsView)

您也可以通过使 mapDispatchToProps 成为它自己的函数来清理它：

function mapDispatchToProps(dispatch) {
  return {
    resetErrorMessage: () => dispatch(resetErrorMessage()),
    changePictogramsKeyword: () => dispatch(changePictogramsKeyword())
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchPictogramsView)

如果可行，请告诉我！

Answer 2

确实在文档中：

If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props

当我写的时候：

<SearchBox value={inputValue} onChange={changePictogramsKeyword} />

现在是：

<SearchBox value={inputValue} onChange={this.props.changePictogramsKeyword} />

所以我真的调用了动作的派发而不仅仅是动作！

没有触发 Redux 操作

Redux action is not being fired

redux

material-ui