Redux 操作没有被触发答案

【问题标题】：Redux action is not being firedRedux 操作没有被触发
【发布时间】：2016-06-14 06:58:09
【问题描述】：

Redux 操作 changePictogramsKeyword 未被触发。

这是我定义动作和reducer的文件（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)

这是 SearchBox 组件的代码。 AutoComplete 是一个 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

【问题讨论】：

标签： redux material-ui

【解决方案1】：

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

在您的SearchPictogramsView 中，更改connect() 调用的mapDispatchToProps 函数以返回带有包装函数的对象：

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)

让我知道这是否有效！

【讨论】：

您的代码不能解决问题。我觉得我写的也还可以。我在 connect 方法中的第二个参数是一个对象......并且，来自文档：如果传递了一个对象，则其中的每个函数都将被假定为 Redux 操作创建者。一个具有相同函数名的对象，但每个动作创建者都包装在一个调度调用中以便可以直接调用它们，将被合并到组件的 props 中
网址：github.com/reactjs/react-redux/blob/master/docs/…
TIL，我的错。我不知道这行得通，很高兴你找到了解决方案！

【解决方案2】：

确实在文档中：

如果传递了一个对象，它里面的每个函数都将被假定为 Redux 动作创建者。具有相同函数名称的对象，但每个动作创建者都包含在一个调度调用中，因此它们可能是直接调用，会被合并到组件的props中

我写的时候：

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

现在是：

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

所以我真的称之为动作的调度，而不仅仅是动作！

【讨论】：