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) 

讓我知道，如果這有效！