2
votes

La page ne s'actualise pas automatiquement après l'élément DELETE et UPDATE dans les listes. React-Redux

Je rencontre ce problème où ma page ne s'actualise pas automatiquement après la suppression de l'élément de la liste. L'élément de la liste est supprimé mais je dois actualiser manuellement la page pour voir la liste mise à jour. Existe-t-il un moyen d'améliorer le code?

C'est l'action List.js. Action

import {ADD_USER} from '../Actions/Create';
import {DELETE_USER, UPDATE_USER} from '../Actions/Update';

export default (state = null, action) => {
switch (action.type) {
    case ADD_USER:
        return action.payload;
    case DELETE_USER:
        return action.payload;
    case UPDATE_USER:
        return action.payload;
    default:
        return state;
   }
   };

Ceci est le composant UserList.js. Composants

import React, { Component } from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import {deleteUser} from '../Actions/Update';
import {handleModal} from "../Actions/Global";

class UsersList extends Component {
constructor(props) {
    super(props);
}

editUser(user) {
    this.props.handleModal(user);
}

handleDelete(userid) {
    this.props.deleteUser(userid);
}

renderUsers(users) {
    return users.map((user) => {
        return (
            <tr key={user.id}>
                <td>{user.firstName}</td>
                <td>{user.lastName}</td>
                <td>{this.displayCurrentOrg(user)}</td>
                <td className="md-visible"> . 
{moment(user.createdAt).format('MM.DD.YYYY')}</td>
                <td>
                    <button className="btn btn-primary" onClick={() => 
this.editUser(user)}><i
                        className="fa fa-edit"></i></button>
                    <button
                        className="btn btn-danger"
                        onClick={() => {
                            if (window.confirm('Are you sure to delete this 
user?')) this.handleDelete(user.id)
                        }}><i className="fa fa-trash"></i></button>
                </td>
            </tr>
        );
    })
}
render() {
    return (
        <table className="table table-responsive-lg">
            <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Current Organization</th>
                <th className="md-visible">Registered</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {this.renderUsers(this.props.users)}
            </tbody>
        </table>
    )
  }
 }

 function mapStateToProps(globalState) {
 return {};
 }

 export default connect(mapStateToProps, {deleteUser, handleModal}) . 
 (UsersList);

Voici les réducteurs UserUpdates. Réducteurs

//Update user action

export const UPDATE_USER = 'UPDATE_USER';
export const updateUser = (id, ...data) => async (dispatch, getState, api) => {
const res = await api.put('/user/update/' + id, data[0])
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: UPDATE_USER,
    payload: res.data
});
};

// Delete user actions
export const DELETE_USER = 'DELETE_USER';
export const deleteUser = (id) => async (dispatch, getState, api) => {
const res = await api.delete('/user/del/' + id, null)
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: DELETE_USER,
    payload: res.data,
    state: getState
});
};

reactjs react-redux redux

9 commentaires

Quelles données sont renvoyées par l'API?

{"success": true, "message": "Supprimé avec succès"} @JiteshManglani

L'état initial est une liste d'utilisateurs, après l'envoi DELETE_USER, l'état suivant devrait être une nouvelle liste d'utilisateurs sans la liste supprimée. Mais votre réduction rend le nouvel état égal à {success: true, message: 'xxx'}

@ 喝茶的螃蟹 si cela, je pense que la liste des utilisateurs sera vide. Parce que le nouvel état n'a pas de propriété users , mais uniquement success et message ?

Pouvez-vous nous montrer la ligne console.log (res) juste avant la ligne dispath dans la fonction delete ?

La liste n'est pas mise à jour après la suppression ou la mise à jour, sauf si je rafraîchis la page.

@Tam Dc Oui, les utilisateurs seront vides et users.map signalera une erreur de Impossible de lire la propriété 'map' non définie . Quelque chose n'est pas clair: 1. comment la propriété users se connecte à UserList 2. quelle est la nouvelle valeur des utilisateurs en magasin après l'action d'expédition DELETE_USER

La liste des utilisateurs est obtenue sous forme d'accessoires dans Users.js à partir d'un Redux Reducer Users.js (qui est défini avec une requête axios à l'API, puis envoyée en tant qu'accessoires à UsersList.js

@ 喝茶的螃蟹 mais OP a les mêmes données. Peut-être que le message d'erreur est affiché dans la console de l'outil de développement. Et puis n'a pas changé l'interface utilisateur.

3 Réponses :

0
votes

Je pense que les données de payload que vous utilisez pour expédier ont un format incorrect. Je suppose que votre état ici est la liste des utilisateurs . Ensuite, je pense que le code devrait être:

export const deleteUser = (id) => async (dispatch, getState, api) => {
  const res = await api.delete('/user/del/' + id, null)
    .then(function (res) {
      if(res.success) {
        dispatch({
          type: DELETE_USER,
          payload: { id },
          state: getState
        });
      }
    })
    .catch(function (err) {
      return err.response;
    });
};

// Reducer
case DELETE_USER: {
      const newList = state.filter(e => e.id !== action.payload.id)
      return newList ;
    }

2 commentaires

L'élément de la liste est supprimé mais les listes ne sont toujours pas mises à jour tant que je n'ai pas actualisé la page.

Le problème ici est que la nouvelle liste des utilisateurs utilisée pour mettre à jour le magasin après sa suppression n'était pas correcte. Et pouvez-vous me dire quoi dans l ' état ? comme: state = {users: [], ...} ou state = users

0
votes

Vous devez envoyer l'action de rechargement des données une fois que vous avez réussi à supprimer ou à mettre à jour. Cela devrait mettre à jour votre liste et votre interface utilisateur. Par cela, vous n'avez pas besoin d'actualiser la page pour voir les modifications de données.

J'ai ce problème où ma page ne s'actualise pas automatiquement après la suppression de l'élément de la liste. L'élément de la liste est supprimé mais je dois actualiser manuellement la page pour voir la liste mise à jour. Existe-t-il un moyen d'améliorer le code?

Voici l'action List.js. Action

//Update user action

export const UPDATE_USER = 'UPDATE_USER';
export const updateUser = (id, ...data) => async (dispatch, getState, api) => {
const res = await api.put('/user/update/' + id, data[0])
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: UPDATE_USER,
    payload: res.data
});
dispatch({
   type: LOAD_USER
});
};

// Delete user actions
export const DELETE_USER = 'DELETE_USER';
export const deleteUser = (id) => async (dispatch, getState, api) => {
const res = await api.delete('/user/del/' + id, null)
    .then(function (res) {
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

dispatch({
    type: DELETE_USER,
    payload: res.data,
    state: getState
});
dispatch({
   type: LOAD_USER
});
};

J'ai distribué l'action LOAD_USER pour cela peut-être que vous faites référence à une autre action qui charge les données de vos utilisateurs à afficher.

2 commentaires

à quoi devrait ressembler le réducteur?

Comment chargez-vous les données pour la première fois que cette action peut être envoyée ici.

0
votes

Voici un résumé de ce que vous devez faire pour voir la liste des utilisateurs mise à jour:

// Update user list action
export const UPDATE_USER_LIST = 'UPDATE_USER_LIST';
export const updateUsers = () => async (dispatch, api) => {
    const res = await api
        .put('/users') // you need to use GET on the URI where you store the users 
        .then(res => {
            return res;
        })
        .catch(err => {
            return err.response;
        });

    dispatch({
        type: UPDATE_USER_LIST,
        payload: res.data
    });
};

// Delete user action
export const DELETE_USER = 'DELETE_USER';
export const deleteUser = (id) => async (dispatch, getState, api) => {
const res = await api.delete('/user/del/' + id, null)
    .then(function (res) {
        // you should call another action to update the User list
        dispatch({
            type: UPDATE_USER_LIST
        });
        return res;
    })
    .catch(function (err) {
        return err.response;
    });

    dispatch({
        type: DELETE_USER,
        payload: res.data,
        state: getState
    });
};

// The reducer
import {ADD_USER} from '../Actions/Create';
import {DELETE_USER, UPDATE_USER} from '../Actions/Update';

export default (state = null, action) => {

    switch (action.type) {
        case ADD_USER:
            return action.payload;
        case DELETE_USER:
            return action.payload;
        case UPDATE_USER:
            return action.payload;
            // add a case where you get the payload and place it in the users state in the store
        case UPDATE_USER_LIST:
            return action.payload
        default:
            return state;
       }

   };

Vous devez interroger l'URI de vos utilisateurs (GET) et utiliser passer la charge utile dans votre réducteur à obtenir la nouvelle version de votre liste d'utilisateurs.

J'espère que cela vous aidera :)

0 commentaires