Как обновить пост, используя ответ и редукс

Question

Я хочу создать блог-сайт, на котором я хочу, чтобы пользователь мог сохранить свой пост и отредактировать тот же пост позже. Я не совсем понимаю, как заставить веб-сайт знать, что я хочу отредактировать этот конкретный пост c, используя snippetId, а также хочу, чтобы веб-сайт знал, является ли он новым постом или я открыл существующий пост для редактирования, чтобы, когда я откройте сообщение для редактирования, затем заголовок и текстовое поле заполняются значениями, полученными из магазина приставок.

Я создал codesandbox для него.

Редактор. js

import React, { Component } from "react";
import { connect } from "react-redux";
import { savePost, retrievePost } from "./actions/posts";

class Editor extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "", //should I assign them using snippetData.snippetTitle since if it's a new post then it'll be null anyway
      enteredText: ""
    };
  }
  componentDidMount() {
    //Load the snippet
    retrievePost(match.params.snippetId); // will it load the snippetId too?
  }

  handleChange = event => {
    const { value } = event.target;
  };

  // Save Snippet
  performSave = snippetData => {
    const { enteredText, title } = this.state;
    savePost(snippetData.snippetId, enteredText, title); //is it the right way to send the parameters to save the post?? not using match.params.snippetId because the person might continue editing the post without leaving the editor and then it'd save a duplicate copy with different ids
  };

  render() {
    return (
      <>
        <input
          type="text"
          id="titletext"
          placeholder="Enter title here"
          limit-to="64"
          className="inptxt"
          onChange={title => this.setState({ title })}
        />
        <button
          className="btn savebtn"
          onClick={() => this.performSave({ ...this.state })}
        >
          Save Snippet
          <i className="fas fa-save" />
        </button>

        <textarea
          name="enteredText"
          onChange={enteredText => this.setState({ enteredText })}
        >
          {}
        </textarea>
      </>
    );
  }
}

const mapStateToProps = state => ({
  snippetData: state.snippetData
});

export default connect(
  mapStateToProps,
  { savePost, retrievePost }
)(Editor);

действия. js файл

import { SAVE_POST, UPDATE_POST, RETRIEVE_POST, HOME_LOADED } from "./types";
import axios from "axios";
export const savePost = ({
  snippetId,
  snippetDescription,
  snippetTitle
}) => async dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };
  let snippetData = { snippetId, snippetDescription, snippetTitle };
  try {
    if (snippetId == null) {
      const res = await axios.post(
        "/api/save",
        JSON.stringify(snippetData),
        config
      );
      snippetData.snippetId = res.data;
      dispatch({
        type: SAVE_POST,
        payload: snippetData
      });
    } else {
      await axios.post("/api/update", JSON.stringify(snippetData), config);
      dispatch({
        type: UPDATE_POST,
        payload: snippetData
      });
    }
  } catch (err) {
    console.log(err);
  }
};

// Retrieve post

export const retrievePost = snippetId => async dispatch => {
  try {
    const res = await axios.post(`/api/snippetdata/${snippetId}`);
    dispatch({
      type: RETRIEVE_POST,
      payload: res.data
    });
  } catch (err) {
    console.error(err);
  }
};

//Retrieve all the post
export const onLoad = () => async dispatch => {
  try {
    const res = await axios.post(`/api/mysnippets/`);
    dispatch({
      type: HOME_LOADED,
      payload: res.data
    });
  } catch (err) {
    console.error(err);
  }
};

// edit a post

редуктор. js

import {
  SAVE_POST,
  UPDATE_POST,
  RETRIEVE_POST,
  HOME_LOADED
} from "../actions/types";

import { initialState } from "../store";

export default function(state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case SAVE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case UPDATE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case RETRIEVE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case HOME_LOADED:
      return {
        ...state,
        snippets: payload
      };
    case "SET_EDIT":
      return {
        ...state,
        snippetToEdit: action.snippet
      };
    default:
      return state;
  }
}