Попытка понять, как сделать запрос PUT с реакцией и избыточностью - PullRequest
Новая
       106

Попытка понять, как сделать запрос PUT с реакцией и избыточностью

0 голосов
/ 04 мая 2020

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

Мне удалось добавить и удалить сообщения, но теперь я пытаюсь понять, как редактировать сообщение с помощью Запрос PUT к моему json серверу, никогда ранее не выполнял запрос PUT, так что все новое для этого.

Это мой компонент, в котором у меня есть список сообщений, и после просмотра учебника, в котором они редактировали сообщение как ниже с вводом, я пытаюсь это сделать.

Но я не могу заставить его работать, и я как бы застрял, пытаясь понять, где мне нужно изменить свой код. Прямо сейчас я не могу ни ввести ввод, ни добавить идентификатор в мой запрос на выборку / PUT, ни сделать запрос PUT на данный момент (возможно, частично bcs редуктора)? У кого-нибудь есть предложения, с чего начать, где искать или как это сделать? Я хочу понять это:) 

import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchEditMessage } from 'reducer/messages'
import { DeleteBtn } from './DeleteBtn'

export const MessageList = () => {
  const [update, setUpdate] = useState('')
  const dispatch = useDispatch()


  const allMessages = useSelector((state) => state.messages.allMessages)


  const handleSetUpdate = (event) => {
    event.preventDefault()
    //pass in the edited message id
    dispatch(fetchEditMessage())
    console.log('Edit message', handleSetUpdate)

  }

  return (
    <div className="message-list">
      <ul>
        {allMessages.slice(0).reverse().map((message) => (
          <li key={message.id}>
            <div className="header-container">
              <p className="message-name">{message.name}</p>
              <div className="btn-container">
                <button className="edit-btn"
                  onClick={handleSetUpdate}>
                  <span role="img" aria-label="Edit">✎</span>
                </button>

                <DeleteBtn message={message} />
              </div>
            </div>

            <div className="message-container">
              {/* Here is the input for changing the message */}
              <p className="message" onSubmit={handleSetUpdate}>
                <input
                  className="edit-message-input"
                  id={message.id}
                  value={message.message || message.id} //not sure if this is a correct or even possible way to handle the value that I want to pass to my reducer page.
                  onChange={event => setUpdate(event.target.value)}
                />

              </p>
            </div>
          </li>
        ))}
      </ul>

    </div>
  )
}

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

import { createSlice } from '@reduxjs/toolkit'

export const messages = createSlice({

    name: 'messages',
    initialState: {
        allMessages: [],
        message: {
            success: null,
            error: null
        }
    },

    reducers: {

        // **** this reducer/action should change the message with a PUT request
        editMessage: (state, action) => {
            console.log('changeMessageState', state)
            console.log('changeMessageAction', action)
            // needs to find the message via id and then edit it
            const existingMessage = state.allMessages.find((message) => message.id === action.payload.id)
            if (existingMessage) {
                existingMessage.replace((message) => message.id === action.payload.id)
            }
        },
    }
})




// ****** Put message to edit the message *****
export const fetchEditMessage = (id) => {
    return (dispatch) => {
        fetch(`http://localhost:3004/messages/${id}`, {
            method: 'PUT',
            statusCode: 204,
            body: JSON.stringify({}), //{message}?
            headers: { 'Content-Type': 'application/json' }
        })
            .then((res) => res.json())
            .then((json) => {
                console.log('PUT', json, id)
                dispatch(messages.actions.editMessage())
            })
            .catch(err => {
                console.error('error', err)
                dispatch(messages.actions.editMessage({ error: `Error, failed to edit` }))
            })
    }
}
...