1
votes

Comment mettre à jour un tableau à l'aide de redux

J'utilise react-redux pour créer une application CRUD simple. La possibilité d'importer des titres et des descriptions à partir de l'entrée, de les stocker dans le tableau et de les supprimer a été implémentée, mais la possibilité de les modifier est difficile et demande de l'aide. XXX

postReducer.js

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updatePosting } from '../store/actions';

const Modal = ({ post, modal, close }) => {
  // update redux
  const posts = useSelector(state => state.posts);
  const dispatch = useDispatch();

  const onUpdate = (title, description) =>
    dispatch(updatePosting(title, description));

  // inputs
  const [inputs, setInputs] = useState({
    title: post.title,
    description: post.description,
  });

  const { title, description } = inputs;

  const onChange = e => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    onUpdate(title, description);
    setInputs({
      title: post.title,
      description: post.description,
    });
  };

  return (
    <React.Fragment>
      {modal ? (
    <React.Fragment>
      <div className="modal-container">
        <form className="modal" onSubmit={onSubmit}>
          <div className="title">
            <input
              className="titleInput"
              type="text"
              name="title"
              required
              value={title}
              onChange={onChange}
            />
            <button onClick={close}>x</button>
          </div>
          <div className="des">
            <textarea
              name="description"
              className="modal-des"
              cols="30"
              rows="10"
              required
              value={description}
              onChange={onChange}
            ></textarea>
          </div>
          <button onSubmit={onSubmit}>submit</button>
        </form>
      </div>
    </React.Fragment>
      ) : null}
    </React.Fragment>
  );
};

export default Modal;

La méthode que j'ai essayée n'a pas été modifiée.

case UPDATE_POSTING:
            return state.map(post => post.id === action.id ? {
                ...action.post,
            } :
            post
            )

form.jsx

const initialState = [{
    id: 1,
    title: ' This is First Post',
    description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit.',
}]

const posts = (state = initialState, action) => {
    switch (action.type) {
        case ADD_POSTING:
            return state.concat(action.post);
        case DELETE_POSTING:
            return state.filter(post => post.id !== action.id);
        case UPDATE_POSTING:
            return // help
        default:
            return state;
    }
};

Merci pour votre aide dans la résolution de ce problème.

javascript redux

1 commentaires

redux.js. org / recettes / structuration-réducteurs /…

4 Réponses :

0
votes

Votre problème vient de la façon dont vous utilisez l'objet action . Il contient votre message en tant que propriété payload tel que vous le mettez dans la méthode d'action:

case UPDATE_POSTING:
   return state.map(post => {
     if(post.id === action.payload.id){
        post = action.payload;
     }
   }
  )

}

Ainsi, votre message peut être accessible avec action.payload

export const updatePosting = (payload) => {
return {
    type: UPDATE_POSTING,
    payload
}

0 commentaires

0
votes

resp:

updatePosting = (post) => ({
    type: UPDATE_POSTING,
    payload: {
        title: post.title,
        description: post.description
    }
})

dans votre action:

case UPDATE_POSTING:
            return state.map((post, index) => {
                if (post.id === action.payload.id) {
                    return Object.assign({}, post, {
                        title: action.payload.title,
                        description: action.payload.description,
                        ...
                    })
                }

                return post
            })

J'espère que cela aidera!

0 commentaires

1
votes

Il semble que vous deviez effectuer deux opérations:

1) filtre tous les messages qui n'ont pas l'ID du message mis à jour.

2) Ajouter le nouveau message au tableau filtré et renvoyez-le comme nouvel état.

Notez que pour ce faire, vous devrez envoyer l ' id comme argument lorsque vous appelez updatePosting . p>

case UPDATE_POSTING: {
  const filtered = state.filter((post) => post.id !== action.post.id);
  return [ ....filtered, action.post ];
}

0 commentaires

0
votes

Il y a quelques erreurs dans votre code. Votre appel de mise à jour ne fournit pas l'ID pour lequel vous mettez à jour: alors transmettez d'abord l'ID du message que vous modifiez.

 case UPDATE_POSTING:
    // find the id which are trying to update with new title and description
    const filtered = state.filter((post) => post.id === action.payload.id);
    filtered.title= action.payload.title;
    filtered.description= action.payload.description;
    return filtered; //according your need post this

Puis dans votre réducteur:

const onUpdate = (id, title, description) =>
dispatch(updatePosting(id, title, description));

0 commentaires