Question

Redux操作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)

这是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

Answer 1

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

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

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

真的是在文档中：

如果传递了一个对象，则假定其中的每个函数都是一个Redux动作创建者。具有相同功能名称的对象，但是将每个动作创建者包含在一个调度呼叫中，这样他们就可以直接调用，将合并到组件的props
中

当我写道：

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

现在是：

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

所以我真的称之为行动派遣，而不仅仅是行动！

Redux行动没有被解雇

2 个答案: