ASP.NET CORE React Reduxアプリケーションでレコードが更新されないのはなぜですか？

私はReactwith Reduxを初めて使用し、いくつかの基本的なクラッド操作を備えた新しいWebアプリケーションに取り組んでいます。リポジトリパターンを使用してASP.NETCoreを使用してこれを構築しています。

私のアプリケーションはデータを正しく表示しており、データを正しく追加することもできます。私が抱えている問題は、データの更新が機能しないことです。データがコントローラーに渡されている間、パラメーターに含まれている変更を確認できます。データをコミットしようとすると、更新されません。

私のプロジェクトは次のように設定されています。特定の部分を短縮して、作業しているコンポーネントのみを含めました。

Shelly.Data
    |-BaseEntity.cs
    |-Vessel.cs

Shelly.Repo
    |-IRepository.cs
    |-Repository.cs
    |-ShellyContext.cs

Shelly.Services
    |-IVesselService.cs
    |-VesselService.cs

Shelly.UI
    |-ClientApp
        |-src
            |-components
                |-vessels
                    |-VesselsComponent.js
            |-store
                |-Vessels.js

問題が私のReactセットアップにあるとは確信していないので、この質問にリポジトリのコードを含めましたが、おそらく誰かがそれを手伝ってくれるでしょう。

Repo / IRepository.cs

public interface IRepository<TEntity> where TEntity : BaseEntity
{
    IEnumerable<TEntity> GetAll();
    TEntity Get(long id);
    void Insert(TEntity entity);
    void Update(TEntity entity);
    void Delete(TEntity entity);
    void Remove(TEntity entity);
    void SaveChanges();
}

Repo / Repository.cs

public class Repository<TEntity> : IRepository<TEntity> where TEntity : BaseEntity
{
    private readonly ShellyContext _dbContext;
    private DbSet<TEntity> entities;
    string errorMessage = string.Empty;

    public Repository(ShellyContext context)
    {
        this._dbContext = context;
        entities = context.Set<TEntity>();
    }

    ...

    public void Update(TEntity entity)
    {
        if (entity == null)
        {
            throw new ArgumentNullException("entity");
        }
        _dbContext.SaveChanges();
    }
    public void SaveChanges()
    {
        _dbContext.SaveChanges();
    }

    ...

}

サービス/ IVesselService

public interface IVesselService
{
    IEnumerable<Vessel> GetVessels();
    Vessel GetVessel(long id);
    void InsertVessel(Vessel vessel);
    void UpdateVessel(Vessel vessel);
    void DeleteVessel(long id);
}

サービス/ VesselService

public class VesselService : IVesselService
{
    private IRepository<Vessel> vesselRepository;

    public VesselService(IRepository<Vessel> vesselRepository)
    {
        this.vesselRepository = vesselRepository;
    }
    public void UpdateVessel(Vessel vessel)
    {
        vesselRepository.Update(vessel);            
    }
}

次の部分は、reactから呼び出されてCRUD操作を実行し、APIにデータを提供するコントローラーです。読み取りと追加は機能しているように見えますが、更新は機能してvesselいません。更新されたデータが渡されているのを確認できますが、コミットされていないようで、古いデータで更新されます。

Controllers / VesselDataController.cs

[Route("api/[controller]")]
public class VesselDataController : Controller
{
    private readonly IVesselService vesselService;
    public VesselDataController(IVesselService vesselService)
    {
        this.vesselService = vesselService;
    }

    ...


    [HttpPost]
    public ActionResult AddVessel([FromBody]Vessel vessel)
    {
        vesselService.InsertVessel(vessel);
        return Ok(new
        {
            success = true,
            returncode = "200"
        });
    }

    [HttpPut]
    public ActionResult Update([FromBody]Vessel vessel)
    {
        vesselService.UpdateVessel(vessel);    
        return Ok(new
        {
            success = true,
            returncode = "200"
        });
    }
}

これが私のReact / Redux設定のコードです。繰り返しますが、相対コンポーネントのコードのみを含めました。

ClientApp / src / components / VesselsComponent.js

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../../store/Vessels';

class VesselsComponent extends Component {

    state = {
        name: "",
        imo: "",
        editing: ""
    };

    componentWillMount() {
        this.props.requestVessels();
    }

    toggleEditing(itemId) {
        console.log("Editing" +  ' ' + itemId);
        this.setState({ editing: itemId });
    }

    handleVesselUpdate(vessel) {         
        this.props.updateVessel(vessel);
        setTimeout(this.props.requestVessels, 600);
    }

    handleEditItem() {
        let itemId = this.state.editing;        
        var editVessel = this.props.vessels.find((v) => v.Id === itemId);        

        editVessel.IMO = this.refs[`IMO_${itemId}`].value;
        editVessel.AddedDate = this.refs[`AddedDate_${itemId}`].value;
        editVessel.ModifiedDate = this.refs[`ModifiedDate_${itemId}`].value;        

        this.handleVesselUpdate(editVessel);        
        this.setState({ editing: "" });
    }

    renderItemOrEditField(vessel) {
        if (this.state.editing === vessel.Id) {
            return (
                <tr key={vessel.Id}>
                    <td>{vessel.Name}</td>
                    <td>{vessel.IMO}</td>
                    <td>
                        <input onKeyDown={this.handleEditField} type="text" ref={`IMO_${vessel.Id}`} name="IMO" defaultValue={vessel.IMO} />
                        <input onKeyDown={this.handleEditField} type="text" ref={`AddedDate_${vessel.Id}`} name="AddedDate" defaultValue={vessel.AddedDate} />
                        <input onKeyDown={this.handleEditField} type="text" ref={`ModifiedDate_${vessel.Id}`} name="ModifiedDate" defaultValue={vessel.ModifiedDate} />
                    </td>
                    <td>
                        <button onClick={this.handleEditItem.bind(this)} label="Update Item">Update</button>
                    </td>
                </tr>
        )
    } else {
        return (
            <tr key={vessel.Id}>
                <td>{vessel.Name}</td>
                <td>{vessel.IMO}</td>
                <td><button onClick={this.toggleEditing.bind(this, vessel.Id)} className="btn btn-info">Edit</button></td>
            </tr>);
    }
}

renderVesselsTable(props) {
    return (
        <table className="table">
            <thead className="thead-dark">
                <tr>
                    <th>Name</th>
                    <th>IMO</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {props.vessels.map(vessel =>
                    this.renderItemOrEditField(vessel)
                )}
            </tbody>
        </table>
    )
}

render() {
    return (
        <div>
            <h3>Vessels</h3>                
            {this.renderVesselsTable(this.props)}

            <table className="table">
                <thead className="thead-dark">
                </thead>
                <tbody>
                    <tr>
                        <td>Name:</td>
                        <td>
                            <input className="form-control" id="vesselName" type="text" value={this.state.name} onChange={(ev) => this.setState({ name: ev.target.value })} />
                        </td>
                    </tr>
                    <tr>
                        <td>IMO:</td>
                        <td>
                            <input className="form-control" id="vesselImo" type="text" value={this.state.imo} onChange={(ev) => this.setState({ imo: ev.target.value })} />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button className="btn btn-default btn-success" onClick={this.addVessel.bind(this)}>Add Vessel</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        );
    }
} 

export default connect(
    state => state.vessels,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(VesselsComponent);

最後に、これがVessel.jsからstoreです。

const requestVesselsType = 'REQUEST_VESSELS';
const receiveVesselsType = 'RECEIVE_VESSELS';
const requestVesselType = 'REQUEST_VESSEL';
const receiveVesselType = 'RECEIVE_VESSEL';
const addVesselType = 'ADD_VESSEL';
const updateVesselType = "UPDATE_VESSEL";
const initialState = { vessels: [], vessel: {}, isLoading: false };

let currentvessel = {};

export const actionCreators = {
    requestVessels: () => async (dispatch, getState) => {
        dispatch({ type: requestVesselsType });

        const url = 'api/VesselData/GetVessels';
        const response = await fetch(url);
        const allvessels = await response.json();

        dispatch({ type: receiveVesselsType, allvessels });
    },
    requestVessel: () => async (dispatch, getState) => {
        dispatch({ type: requestVesselType });

        const url = 'api/VesselData/GetVessel/${id}';
        const response = await fetch(url);
        const vessel = await response.json();

        dispatch({ type: receiveVesselType, vessel });
    },        
    updateVessel: (vessel) => async (dispatch, getState) => {
        const baseURL = "/api/VesselData";
        const data = JSON.stringify({
            Id: vessel.Id,
            Name: vessel.Name,
            IMO: vessel.IMO,
            ModifiedDate: vessel.ModifiedDate,
            AddedDate: vessel.AddedDate
        });
        const fetchTask = fetch(baseURL, {
            method: "PUT",
            headers: {
                Accept: "application/json",
                "Content-Type" : "application/json",
            },
            body: data
        })
            .then((data => {
                dispatch({ type: updateVesselType, vessel: data })
            }))

    }
}
export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === requestVesselsType) {
        return {
            ...state,
            isLoading: true
        };
    }
    if (action.type === receiveVesselsType) {
        return {
            ...state,
            vessels: action.allvessels,
            isLoading: false
        }
    }
    if (action.type === requestVesselType) {
        return {
            ...state,
            isLoading: true
        };
    }
    if (action.type === receiveVesselType) {
        currentvessel = action.vessel;
        return {
            ...state,
            vessel: currentvessel,
            isLoading: false
        }
    }       
    if (action.type === updateVesselType) {
        return {
            ...state,
            isLoading: false
        };
    }

    return state;
};

だから、それは私のアプリケーションです、それは基本的であり、私は行くにつれてまだ学んでいますが、updateメソッドからのコミットの欠如の論理的な理由を見ることができません。コンテキストの保存はリポジトリで処理され、それがヒットし、レコードの更新がないことを私は知っています。誰かが私がどこで間違っているのか理解するのを手伝ってもらえますか？