嗨,我正在将选择中的值发送到redux存储:
import React, { Component } from 'react';
import { Select } from 'antd';
import { connect } from "react-redux";
import * as actions from '../store/actions/select';
class SelecionarCrypto extends Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onBlur = this.onBlur.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onSearch = this.onSearch.bind(this);
console.log("(SelecionarCryto.js):",this.props);
this.state = {
ValorState: "nada"
}
};
onChange(value) {
console.log(`selected ${value}`);
this.setState({ValorState: value});
console.log("(SelecionarCryto.js) New value onchange", this.state.ValorState)
this.props.onSelectCrypto(value)
}
onBlur() {
console.log('blur');
}
onFocus() {
console.log('focus');
}
onSearch(val) {
console.log('search:', val);
}
render(){
const { Option } = Select;
console.log("(SelecionarCryto.js) New value Render: ", this.state.ValorState)
return (
<Select
showSearch
style={{ width: 200 }}
placeholder="Seleciona:"
optionFilterProp="children"
onChange={this.onChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
onSearch={this.onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="ETH">ETH</Option>
<Option value="BTC">BTC</Option>
<Option value="XRP">XRP</Option>
</Select>
);
}
}
const mapStateToProps = state => {
return {
token: state.token,
selectvalue: state.value
};
};
//Dispaching to STORE:
const mapDispatchToProps = (dispatch) =>{
return{
onSelectCrypto: (value) => dispatch(actions.SelectCrypto(value))
}
};
export default connect(mapStateToProps, mapDispatchToProps)(SelecionarCrypto);
使用控制台,每次使用select时,我都会看到它的工作方式,并且动作也发生了变化。
此部分是我要联系商店以接收道具的代码:
const mapStateToProps = state => {
console.log("recibe mapStateToProps: ", state)
return {
token: state.token,
ValorState: state.ValorState,
username: state.username,
selectvalue: state.value // <<<---- This one
};
};
这是获得的道具:
为什么我总是不确定的?如果我的组件在值更改时连接到商店,是不是应该获取值?
有关化简器代码的信息:(部分代码:)
const SelectCryptoValue = (state, action) => { // <--- This one.
console.log("necesito esto:", state, " ", action)
return updateObject(state, {
selectvalue: action.value,
error: null,
loading: false
});
}
const reducer = (state=initialState, action) => {
switch (action.type) {
case actionTypes.AUTH_START: return authStart(state, action);
case actionTypes.AUTH_SUCCESS: return authSuccess(state, action);
case actionTypes.AUTH_SUCCESS_USERNAME: return authSuccessUsername(state, action);
case actionTypes.AUTH_FAIL: return authFail(state, action);
case actionTypes.AUTH_LOGOUT: return authLogout(state, action);
case actionTypes.SELECT_CRYPTO: return SelectCryptoValue(state, action);
default:
return state;
}
}
export default reducer;
您正确定义了它,但是使用了一个突变,因此不会触发您的反应组件的重新渲染