'How can I update the state in react redux
I am new to React and trying to learn redux. I want to run a action that is updateInput(name,value)
redux action is
export function updateInput({ name, val }) {
return (dispatch) => {
dispatch({ type: UPDATE_INPUT, payload: { name, val } });
};
}
redux reducer is
const initialState = {
fname: 'xyz',
email: 'xyz.com',
address: 'XXYYZZ',
city: 'XZY',
state: 'XYZ',
country: 'XYZ',
postalcode: '000000',
mobile: '00000000',
intrest: 'Study, Travel, Read',
dob: '',
};
function handleUpdateReducer(state = initialState, action) {
switch (action.type) {
case 'UPDATE_INPUT':
return { ...state, [action.paylod.name]: action.paylod.value };
default:
return state;
}
}
export default handleUpdateReducer
I have exported my state as
export * as actions from './actions/index';
while in react classed base component I need to pass two values to state: name and value
import { connect } from 'react-redux';
import EdiText from 'react-editext';
import './UserDetails.css';
import { actions } from '../state/index';
update(name, val) {
actions.updateInput(name, val);
render() {
return (
<div className='user-profile-details'>
<EdiText
type='text'
value={user.fname}
onSave={(val) => {
this.update('fname', val);
}}
/>
</div>
}
}
const mapStateToProps = (state) => ({
user: state.user,
});
const mapDispatchToProps = (dispatch) => ({
actions: (name, val) => dispatch(actions.updateInput(name, val)),
});
export default connect(mapStateToProps, mapDispatchToProps)(UserDetails);
I didn't get any errors but the value didn't update. I have used edit-text module. link of edit-text npm module
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
