要将输入值设置为Redux reducer文件中的状态,需要按照以下步骤进行操作:
myReducer.js
。const initialState = {
inputValue: ''
};
const myReducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_INPUT_VALUE':
return {
...state,
inputValue: action.payload
};
default:
return state;
}
};
上述代码中,当动作类型为SET_INPUT_VALUE
时,Reducer函数会返回一个新的状态对象,其中inputValue
属性的值被设置为动作的payload
属性值。
createStore
函数。例如:import { createStore } from 'redux';
import myReducer from './myReducer';
const store = createStore(myReducer);
connect
函数将输入值与Redux store中的状态进行连接。这样,当输入值发生变化时,可以通过派发一个动作来更新Redux store中的状态。例如:import { connect } from 'react-redux';
const InputComponent = ({ inputValue, setInputValue }) => {
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
return (
<input type="text" value={inputValue} onChange={handleInputChange} />
);
};
const mapStateToProps = (state) => ({
inputValue: state.inputValue
});
const mapDispatchToProps = (dispatch) => ({
setInputValue: (value) => dispatch({ type: 'SET_INPUT_VALUE', payload: value })
});
export default connect(mapStateToProps, mapDispatchToProps)(InputComponent);
上述代码中,mapStateToProps
函数将Redux store中的inputValue
状态映射到输入组件的属性中,mapDispatchToProps
函数将setInputValue
方法映射到输入组件的属性中,以便在输入值发生变化时派发一个动作来更新Redux store中的状态。
通过以上步骤,你就可以将输入值设置为Redux reducer文件中的状态了。当输入组件中的值发生变化时,Redux store中的状态也会相应地更新。
领取专属 10元无门槛券
手把手带您无忧上云