尝试通过操作获取用户输入，一切正常，我获得了console.logs关于inputVal如何变化的记录，但是当我尝试打印时
我在控制台中未定义我应该像mapDispatchToProps这样使用还是不需要它，因为我正在将动作作为第二个参数传递给mapStateToProps
动作：
export const inputChange = val => {
return {
type: INPUT_CHANGE,
payload: val
};
};
减速器：
import { INPUT_CHANGE } from './actionTypes';
const initialState = {
inputVal: ''
};
export default (state = initialState, action) => {
switch (action.type) {
case INPUT_CHANGE:
return {
...state,
inputVal: action.payload
};
default:
return state;
}
};
主页：
const mapStateToProps = state => {
console.log(state);
return state;
};
class MainPage extends Component {
onInput = e => {
this.props.inputChange(e.target.value);
console.log(this.props.inputChange(e.target.value));
};
render() {
console.log(this.props.inputVal);
return (
<div>
<input onChange={this.onInput}></input>
<p>{this.props.}</p>
</div>
);
}
}
export default connect(
mapStateToProps,
{
addToCart,
removeFromCart,
selectItem,
inputChange
}
)(MainPage);
组合减速器：
import { combineReducers } from 'redux';
import AddItem from './addItem/reducer';
import InputReducer from './reducerInput';
export default combineReducers({
AddItem,
InputReducer
});
我试过了this.props.inputVal。
由于您具有CombineReducers，因此应使用这些键在mapStateToProps中进行访问。
从redux文档：
由combinedReducers（）产生的状态在传递给combinedReducers（）的键名下为每个Reducer的状态命名空间。
您可以通过为传递的对象中的化简使用不同的键来控制状态键名称。例如，您可以调用CombineReducers（{todos：myTodosReducer，counter：myCounterReducer}）来使状态形状为{todos，counter}。
因此，您的mapStateToProps必须类似于：
const mapStateToProps = state => {
console.log(state);
return {
inputVal: state.InputReducer.inputVal
}
};
最小的工作代码沙箱：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句