“调度”不是函数错误

debugcn 发表于 Dev

杰夫温克勒

我在使用 redux 时遇到问题。我正在尝试从我创建的搜索栏中发送一个值，该值将获取我输入的客户端 ID。自动建议工作正常。控制台日志中的项目（ID 号）和值（客户端名称）正确。但我无法将其发送到减速器。我不断收到“调度”不是功能错误。Redux 是导入的。有任何想法吗？

class ClientSearch extends Component {
  constructor(props){
    super(props)
    this.state = {
    }

  lowerCase = (str) => {
    console.log(str);
    return str;
  }

  test = (value, item) => {
    console.log('Inside Test',item.numClientID);

    let { dispatch } = this.props
     dispatch(fetchClient(item.numClientID))
  }
}
  render() {
    let value = '';
      return (
        <div>
          <ReactAutocomplete
            items={this.props.clients}
            shouldItemRender={(item, value) => item.txtName.toLowerCase().indexOf(value.toLowerCase()) > -1}
            getItemValue={(item) => item.txtName}
            renderItem={(item, highlighted) =>
                <div
                  key={item.numClientID}
                  style={{ backgroundColor: highlighted ? 'purple' : 'transparent'}}
                >
                {item.txtName}
                </div>           
            }
            value={this.state.selectedClient}
            onChange={e => this.setState({ selectedClient: e.target.value })}
            onSelect={(value, item) => this.test(value,item)}
          />
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('map state', state)
  return {

    clients: state.client.clients
  };
};

export default connect(mapStateToProps, dispatch =>
  bindActionCreators(listClients, dispatch, fetchClient, dispatch)
)(ClientSearch);

阿迪尔·伊姆兰

尝试这样做。

const mapStateToProps = (state, ownProps) => ({
  clients: state.client.clients
});

const mapDispatchToProps = (dispatch) => ({
  fooAction: (payload) => dispatch(foo(payload)),
  barAction: () => dispatch(bar()),
});

export default connect(mapStateToProps, mapDispatchToProps)(ClientSearch);

这里foo()和bar()是得到发送，所以例如该方法的操作foo()可以定义这样的声明。

function foo(payload) {
  return dispatch => SOME_API_METHOD(payload)
   .then(response => {
     dispatch({
       type: 'SOME_COOL_ACTION_NAME',
       info: response
     });
   })
}

作为参考，请查看react-redux和redux-thunk

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。