Не обновлять страницу профиля после обновления имени пользователя

Начинаю изучать React. Страница профиля не обновляется после смены имени. Запрос обрабатывается, и я получаю желаемый результат, имя пользователя обновляется, но страница профиля не перезагружается, подскажите, пожалуйста, как это исправить. Дело в том, что у меня тоже похожая проблема на странице пользовательских записей, и есть похожая ситуация при добавлении записи, она тоже появляется после перезагрузки страницы. Я не вызываю успешное обновление компонента?

составная часть:

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {users} from "../actions";


class ProfilePage extends Component {

state = {
    text: ""
};

submitName = (e) => {
    e.preventDefault();
    this.props.updateName(this.props.user.id, this.state.text).then(this.resetForm);
    this.setState({text: ""});
};

render() {
    return (
        <div>
            <div>
                <h3>{this.props.user.username}</h3>
                <span>Edit name</span>
                <form onSubmit = {this.submitName}>
                  <input
                    value = {this.state.text}
                    placeholder = "Enter note here..."
                    onChange = {(e) => this.setState({text: e.target.value})}
                    required />
                  <input type = "submit" value = "Save Name" />
                </form>
            </div>
            <p>{this.props.user.id}</p>
        </div>
    )
};
}

const mapStateToProps = state => {
return {
   user: state.auth.user,
}
};

const mapDispatchToProps = dispatch => {
return {
  updateName: (id, newname) => {
    return dispatch(users.updateName(id, newname));
  },
}
};

export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);

действие:

export const updateName = (userId, newname) => {
  return (dispatch, getState) => {

    let headers = {"Content-Type": "application/json", 'Access-Control-Allow-Origin': 'http://localhost:3000'};
    let {token} = getState().auth;

    if (token) {
       headers["Authorization"] = `Token ${token}`;
    }

    let body = JSON.stringify({"username":newname});

    return fetch(`/api/users/${userId}/`, {headers, method: "PUT", body})
    .then(res => {
    if (res.status < 500) {
      return res.json().then(data => {
        return {status: res.status, data};
      })
    } else {
      console.info("Server Error!");
      throw res;
    }
    })
    .then(res => {
    if (res.status === 200) {
      return dispatch({type: 'UPDATE_USERNAME', user: res.data, userId});
    } else if (res.status === 401 || res.status === 403) {
      dispatch({type: "AUTHENTICATION_ERROR", data: res.data});
      throw res.data;
    }
  })
 }
};

редуктор:

const initialState = [];
export default function users(state=initialState, action) {

  switch (action.type) {

    case 'FETCH_USER':
      return [...state, ...action.user];

    case 'UPDATE_USERNAME':
      return [...state, ...action.user];

    default:
     return state;
 }

}