React / Reudx обновление данных через Rest-API: обновленные значения появляются в пути. Почему?

Question

В настоящее время я использую CRUD API в React. С функцией обновления я сталкиваюсь со странной проблемой, которую не могу решить.

Конкретный: обновленные значения появляются после того, как я выполню функцию обновления в моем пути. Например:

1. До того, как я выполню функцию обновления, структура пути выглядит следующим образом: http://localhost:3000/story_listview
2. Извлечение отдельной истории: http://localhost:3000/story/9
3. Изменение имя и содержимое, а также выполнение функции обновления.
4. Обновление не выполнено.
5. Новая структура пути: http://localhost:3000/?title=UpdatedTITLE&content=UpdatedCONTENT#/story/9
6. title=UpdatedTITLE&content=UpdatedCONTENT# остается константой в пути , Поэтому, если я go к представлению списка, путь будет: http://localhost:3000/?title=UpdatedTITLE&content=UpdatedCONTENT#/story_listview.

Я предполагаю, что функция обновления записывает обновленные значения в мой const apiBase, и, таким образом, он становится частью моего дорожка?. Но я не знаю, почему и как?

Я работаю с Redux и Ax * ios.

Edit_Story Component:

import {editStory } from "../../actions/story";

export class EditStory extends Component {

  constructor(props) {
    super(props);
    this.getStory = this.getStory.bind(this);
    this.updateStory = this.updateStory.bind(this);
    this.onChangeTitle = this.onChangeTitle.bind(this);
    this.onChangeContent=this.onChangeContent.bind(this);
    this.onChangeAudio=this.onChangeAudio.bind(this);


this.state = {
    story: {
        id: null,
        title: "",
        content: "",
        audio: ""
      }

    };
}


    componentDidMount() {
    this.getStory(this.props.match.params.id);
  }



  onChangeTitle(e) {
    const title = e.target.value;

    this.setState(function(prevState) {
      return {
        story: {
          ...prevState.story,
          title: title
        }
      };
    });
  }


  onChangeContent(e) {
    const content = e.target.value;

    this.setState(prevState => ({
     story: {
        ...prevState.story,
        content: content
      }
    })); 

  }

  onChangeAudio(e) {
    const audio = e.target.name;

    this.setState(prevState => ({
     story: {
        ...prevState.story,
        [e.target.name]: e.target.files[0]
      }
    }));
  }


  getStory(id) {
    this.props.getSingleStory(id)
      .then(response => {
        this.setState({
          story: response.data
        });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }  




    updateStory() {
    let story = this.state;
    let formData= new FormData ();
    formData.append('id',story.id);
    formData.append('title',story.title);
    formData.append('content',story.content);
    formData.append('audio',story.audio);
    this.props.editStory(
      formData
    )
      .then(response => {
        console.log(response.data);
        //this.props.history.push('/story_listview')

      })
      .catch(e => {
        console.log(e);
      });
  }

Действие Edit Story выглядит так:

// EDIT STORY

const apiBase = "http://localhost:8000/api";

export const editStory = (formData) => (dispatch, getState)=> 
 new Promise ((resolve, reject) => {
  axios.put(apiBase +"/story/${formData.id}/",formData, tokenConfig (getState))
    .then(res => {
      dispatch(createMessage({ editStory: "Story Updated" }));
      dispatch({
        type: EDIT_STORY,
        payload: res.data
      });
      resolve (res);
    })
    .catch(err => {
      reject(err);
       dispatch(returnErrors(err.response.data, err.response.status))
     }
     )
});

И редуктор выглядит так:

case EDIT_STORY:
      return {
        ...state,
        story: state.story.filter(story => story.id  !== action.payload)
      };

Я благодарен за каждый намек.