javascript - 使用React Redux创建帖子

我是一名初级开发人员，最近才加入。我正在尝试创建一个类似博客的网站，用户可以在其中保存帖子并更新已经保存的帖子。我目前对如何在帖子中分配snippetId感到困惑。

因此，该网站已经在Angular中建立，因此有人要求我将其迁移到React。我对于如何将ID从服务器收到的ID存储在response.data中的新帖子感到最困惑，而且，如果ID已经存在，我将如何在Redcc存储的action.js文件中接收ID。

请帮助我了解Angular的snippetData['snippetId']部分，如果我什至应该在snippetData中使用initialState或直接在`initialState中使用snippetId，snippetDescription，snippetTitle。

我的代码现在看起来像这样：

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

最后，这是我被要求翻译成React的Angular文件：

$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')
                }
            });
        }
    }

编辑：

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

最佳答案

我从给定的角度代码中了解到，API保存成功后，您不会获得全部数据。 U仅获取保存数据的ID。因此，在有效负载中，您需要更新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
      };
  }
}