How in a functional component to update the object in the store through the data in the input?

Question

React

There is a component with an input:

import React, {useEffect} from 'react';
import { connect } from 'react-redux';
import Input from '../../elements/Input';
import { updateName } from '../../actions/updateName';

const Archve = (props) => {
  const { newProjectData } = props;
  const handleChange = (e) => {
    e.preventDefault();
    console.log('handle');
    const { newProjectData } = props;
    console.log('newProjectData', newProjectData);
    const newName = e.target.value;
    console.log('name', newName);
    updateName(newName);
    
  };
  const updateNameProject = (e) => {
    if (e.key === 'Enter') {
      console.log('отправка на сервер');
    }
  };
  return (
    <div className="content">
      <div className="container-fluid">
        <div className="row">Архив</div>
        <Input
          label="Название проекта"
          placeholder="Название проекта"
          value={newProjectData.name}
          name="nameProject"
          onChange={handleChange}
          onKeyPress={updateNameProject}
          // onBlur={this.handleChangeFocus}
          hasError={false}
        />
      </div>
    </div>
  );
};

const mapDispatchToProps = (dispatch) => ({
  updateName: (name) => updateName(name),
});

const mapStateToProps = (state) => ({
  newProjectData: state.NewProject.newProjectData,
});
export default connect(mapStateToProps, mapDispatchToProps)(Archve);
;

there is an action:

export const updateName = (name) => (dispatch) => {
    dispatch({
      type: 'UPDATE_NEW_PROJECT_NAME',
      payload: name,
    });
  };

and reducer:

export const initialState = {
  newProjectData: {},
};

export const NewProject = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_NEW_PROJECT':
      return { ...state, newProjectData: action.payload };
    case 'SET_NEW_PROJECT_DATA':
      return { ...state, newProjectData:action.payload};
    case 'UPDATE_NEW_PROJECT_NAME':
      return { ...state, newProjectData: { ...state.newProjectData, name: action.payload } };
    default:
      return state;
  }
}

Doesn't work like that. The console shows that OnChange works, but the new name for the value inputa does not come. Please tell me how to correct. Thanks everyone

Answer 1

yes it should work

// reducer
export const NewProject = (state = initialState, action) => {
  console.log(action.type, action.payload)   // досюда доходит новый name?
  switch (action.type) {

UPD

import { updateName } from '../../actions/updateName';

  const handleChange = (e) => {
    .....
    // тут ты вызываешь оригинальную функцию actions/updateName
    // а не ту которую привязал в mapDispatchToProps 
    // updateName(newName);

    // попробуй
    props.updateName(newName);
    
  };