Страница не обновляется автоматически после удаления и обновления пункта в списках. Реагировать-Redux

Question

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

Это действие List.js. Действие

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

Это компонент UserList.js. Компоненты

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

Это редукторы UserUpdates. Редукторы

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

Answer 1

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

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

Это действие List.js.Действие

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

У меня есть действие LOAD_USER для отправки, возможно, вы ссылаетесь на другое действие, которое загружает данные ваших пользователей для отображения.

Answer 2

Вот краткое изложение того, что вы должны сделать, чтобы увидеть обновленный список пользователей:

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

   };

Вы должны запросить URI своего пользователя (GET) и передать полезную нагрузку в редуктор, чтобы получить новую версию своего списка пользователей.

Надеюсь, это поможет:)

Answer 3

Я думаю, что данные payload, которые вы используете для dispatch, имеют неправильный формат. Я полагаю, ваш state список users. Тогда я думаю, что код должен быть:

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