Redux操作未被解雇

Question

Redux操作changePictogramsKeyword未被解雇。

这是我定义我的动作和减速机（终极版/模块/ 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

所以我的初始化状态是我从rootReducer预期：

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

这是视图的代码，我连接到Redux商店。组件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是一个材料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

这是真的在docs：

如果一个对象传递，它里面的每个功能将被假定为 一个终极版行动的创建者。具有相同功能名称的对象，但 与每一个行动的创建者裹成一个调度呼叫所以他们可能会 直接调用，将​​被合并到组件的道具

当我写道：

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

现在是：

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

所以我真的把调度的行动，而不仅仅是行动！

Answer 2

现在，你的行动只是被调用，但没有出动，因为你不是映射在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) 

让我知道，如果这有效！