Создание постов с реагировать на редукцию

Question

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

Так что этот сайт уже был создан в Angular, и меня попросили перенести его в React. Меня больше всего смущает, как сохранить идентификатор, полученный от сервера в response.data для нового сообщения, а также то, как я мог бы получить его в файле action.js из хранилища Redux, если он уже существует.

Пожалуйста, помогите мне разобраться в части snippetData['snippetId'] из Angular и, если мне нужно, даже использовать snippetData в initialState или просто использовать snippetId, snippetDescription, snippetTitle напрямую в `initialState.

Мой код на данный момент выглядит примерно так:

action. js

import { SAVE_POST } from './types';

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

reducer / post. js

import { SAVE_POST} from '../actions/types';

const initialState={
    snippetData: {
        snippetId: null,
        snippetTitle: null,
        snippetDescription: null
    }
};

export default function (state=initialState, action){
    const {type, payload}=action;
    switch(type){
        case SAVE_POST:
            return {...state, 
            snippetData: {
                snippetId: payload,
                snippetDescription: payload,
                snippetTitle: payload}
        case UPDATE_POST: 
                return {...state,
                    snippetId: payload,
                    snippetDescription: payload,
                    snippetTitle: payload
                }
    }
}

Это, наконец, файл Angular, из которого меня попросили перевести в React:

$scope.savesnippet=function(){
        $scope.snippetdata={}
        $scope.snippetdata['snippetTitle']=$scope.snippetTitle
        $scope.snippetdata['snippetDescription']=$scope.snippetDescription
        console.log($scope.snippetId)
        if($scope.snippetId==null){
            return $http.post('/api/save',$scope.snippetdata).then(function(response){
                if(response.status==200){
                    $scope.snippetId=response.data;
                    toaster.pop('success','Snippet saved successfully!')                    
                }else{                
                    toaster.pop('danger','An error has occured while saving the snippet. Please try again')                                        
                }
            });
        }else{
            $scope.snippetdata['snippetId']=$scope.snippetId        
            return $http.post('/api/update',$scope.snippetdata).then(function(response,status){
                if(response.status==200){
                    toaster.pop('success','Snippet saved successfully!')                                        
                }else{
                    toaster.pop('danger','An error has occured while updating the snippet. Please try again')                                                            
                }
            });
        }
    }

edit:

editor. js

performSave = (snippetData) => {

    const {enteredText, title} =  this.state;
    let {snippetId, snippetDescription, snippetTitle} = snippetData;

    snippetTitle=title;
    snippetDescription=enteredText;
    savePost(snippetId, snippetDescription, snippetTitle);
    }

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

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

Answer 1

Насколько я понимаю, учитывая angular код, при успешном сохранении API вы не получите полные данные. Вы получаете только идентификатор сохраненных данных. Так что в полезной нагрузке вам нужно обновить snippetId. В случае успеха сохранения вам не нужно никаких обновлений. U можно просто использовать в качестве полезной нагрузки.

import { SAVE_POST } from "./types";

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 {
      const res = await axios.post("/api/update", JSON.stringify(snippetData), config);
      dispatchEvent({
        type: UPDATE_POST,
        payload: snippetData
      });
    }
  } catch (err) {
    console.log(err);
  }
};

// Редуктор:

import { SAVE_POST } from "../actions/types";

const initialState = {
  snippetData: {
    snippetId: null,
    snippetTitle: null,
    snippetDescription: null
  }
};

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
      };
  }
}