如何最初调用 api 来保存帖子

Question

I want to save my snippet to the store. However I'm facing some issues now, I only get the snippet id from the server after I have done the api call. So the first time, I need to send only the snippetTile and snippetDescription to the api call. I want the snippetId to check whether a post already exist or not and to update it. How do I omit the snippetId in the api/savesnippets api call when I create a snippet for the first time? I want only the snippetTitle and snippetDescription to be send to the api call as I will get the snippetId as the server response if everything goes well. Right now my api call's request payload looks something like this .

codesandbox

actions.js where I call the api

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;  //cause I only get snippetId from the server
      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);
  }
};

editor.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: "",
      enteredText: ""
    };
  }
  componentDidMount() {
    //Load the snippet
    retrievePost(this.props.match.params.snippetId);
  }

  // Save Snippet
  performSave = snippets => {
    console.log("save function clicked");
    const { enteredText, title } = this.state;
    this.props.savePost({
      snippetId: this.props.match.params.snippetId, //this should be null when initially I'm creating a new post
      snippetDescription: enteredText,
      snippetTitle: title
    });
  };
  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}>
          Save Snippet
          <i className="fas fa-save" />
        </button>

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

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

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

reducer.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,
        snippets: [payload, ...state.snippets] //this payload is only the snippetId right and not the actual snippet??
      };
    case UPDATE_POST:
      const newState = state.filter(
        post => post.snippetId !== payload.snippetId
      );
      return [...newState, payload];

    case RETRIEVE_POST:
      const newwState = state.filter(
        post => post.snippetId !== payload.snippetId
      );
      return [...newwState, payload];
    case HOME_LOADED:
      return {
        ...state,
        snippets: payload
      };
    default:
      return state;
  }
}

store.js

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import posts from "./reducers/posts";

export const initialState = {
  snippets: [
    {
      snippetId: "1",
      snippetTitle: "test",
      snippetDescription: "test test"
    },
    {
      snippetId: "2",
      snippetTitle: "post2",
      snippetDescription: "post 2 post2"
    }
  ]
};
const store = createStore(posts, applyMiddleware(thunk));
export default store;

Answer 1

Update Action.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"
}
};

// remove snippetId here --------------------------------------
    let snippetData = { snippetDescription, snippetTitle };
// --------------------------------------

try {
 if (snippetId == null) {
  const res = await axios.post(
    "/api/save",
    JSON.stringify(snippetData),
    config
  );
  snippetData.snippetId = res.data;  //cause I only get snippetId from the server
  dispatch({
    type: SAVE_POST,
    payload: snippetData
  });
} else {

//add snippetId here for update use only --------------------------------------
  await axios.post("/api/update", JSON.stringify({...snippetData, snippetId}), config); 
// --------------------------------------
  dispatch({
    type: UPDATE_POST,
    payload: snippetData
  });
}
} catch (err) {
  console.log(err);
  }
};

Answer 2

// consider splitting your code with functions
const addToState = (state, action) => {
const cloneSnippets = JSON.stringify(JSON.parse(state.snippets)) // for deep copy
cloneSnippets.push(action.payload) // payload contains all the snipets info (id, descrip.., )
  return {
    ...state,
    snippets : cloneSnippets
  }
}

case SAVE_POST:
   return addToState(state, action)
}`