'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