Показывать оповещение об успешном запросе на получение в реагировать - PullRequest
Новая
       5

Показывать оповещение об успешном запросе на получение в реагировать

1 голос
/ 31 марта 2020

Я обновляю пользователя в моем приложении реагировать & редуцировать . И при успешном обновлении, т.е. запросе (PUT), я хочу показать предупреждение «Пользователь успешно обновлен». Но я не могу сделать то же самое. Ниже приведен мой компонент, код действия и редуктора.

userComponent. js

import React from 'react';
import {updateUserData} from '../redux/actions/user';

const mapStateToProps = (state) =>{
    return{
        updating_user_pending: state.usersData.updating_user_pending,
    }
}

const mapDispatchToProps = (dispatch) =>{
    return{
        updateUserAction: (data) =>{dispatch(updateUserData(data))}
    }
}

Class Users extends React.Component{
    constructor(){
      super();
      this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(values) {
      this.props.updateUserAction(values);
    }

    render(){
      return(
         <form className="form" onSubmit={handleSubmit(this.onSubmit)}>
            <div className="form-group">
              <label className="label">First Name</label>
              <Field className="form-control" name="first_name" component="input" type="text" />
            </div>

            <div className="form-group">
              <label className="label">Email</label>
              <Field className="form-control" name="email" component="input" type="email" />
            </div>

            <button className="btn btn-primary">{(updating_user_pending)?'Submitting...':'Submit'}</button>
         </form>
      );  
}

export default connect(mapStateToProps,mapDispatchToProps)(Users);

action. js

export function updateUserData(data){
    return function(dispatch){
        dispatch({type: UPDATE_USER_PENDING});
        fetch('https://reqres.in/api/users/'+data.user_id, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(res=>{
            if(res.status===200){
                dispatch({type: UPDATE_USER_SUCCESS});
            }else{
                dispatch({type: UPDATE_USER_FAILED});
            }
        })
        .catch(err=>{
            dispatch({type: UPDATE_USER_FAILED});            
        })
    }
}

редуктор. js

import {
    UPDATE_USER_PENDING,
    UPDATE_USER_SUCCESS,
    UPDATE_USER_FAILED
} from '../actions/action-types';

const initialState = {
    updating_user_pending:false
}

const userReducer = function(state = initialState, action) {
    switch(action.type) {
        case UPDATE_USER_PENDING:
            return {
               ...state,
               updating_user_pending: true
            }
        case UPDATE_USER_SUCCESS:
            return {
               ...state,
               updating_user_pending: false
            }
        case UPDATE_USER_FAILED:
            return {
               ...state,
               updating_user_pending: false
            }                                    
        default: 
            return state;
    }
}

export default userReducer;

Итак, я хочу показать уведомление об успехе и ошибке на основе ответов API. Любая помощь в этом будет очень признательна.

Ответы [ 3 ]

1 голос
/ 31 марта 2020

Показать тост в вашей функции действия 

import { toast } from 'react-toastify';

export function updateUserData(data) {
return function(dispatch) {
    dispatch({ type: UPDATE_USER_PENDING });
    fetch('https://reqres.in/api/users/' + data.user_id, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
    })
    .then(res => {
        if (res.status === 200) {
        dispatch({ type: UPDATE_USER_SUCCESS });
        // here
        toast.success("User updated");
        } else {
        dispatch({ type: UPDATE_USER_FAILED });
        }
    })
    .catch(err => {
        dispatch({ type: UPDATE_USER_FAILED });
    });
};
}

В вашем импорте UserComponent 

import { ToastContainer} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'
 // ... your code
render(){
  return(
     <form className="form" onSubmit={handleSubmit(this.onSubmit)}>
        <div className="form-group">
          <label className="label">First Name</label>
          <Field className="form-control" name="first_name" component="input" type="text" />
        </div>

        <div className="form-group">
          <label className="label">Email</label>
          <Field className="form-control" name="email" component="input" type="email" />
        </div>

        <button className="btn btn-primary">{(updating_user_pending)?'Submitting...':'Submit'}</button>
     <ToastContainer />
     </form>
  );

Пример из официальных документов

0 голосов
/ 31 марта 2020

UserComponent. js

import React from 'react';
import {updateUserData} from '../redux/actions/user';

const mapStateToProps = (state) =>{
    return{
        updating_user_pending: state.usersData.updating_user_pending,
    }
}
const showResult = () => {
   window.alert('success');
}

const mapDispatchToProps = (dispatch) =>{
    return{
        updateUserAction: (data) =>{dispatch(updateUserData(data, showResult))}
    }
}

Class Users extends React.Component{
    constructor(){
      super();
      this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(values) {
      this.props.updateUserAction(values);
    }

    render(){
      return(
         <form className="form" onSubmit={handleSubmit(this.onSubmit)}>
            <div className="form-group">
              <label className="label">First Name</label>
              <Field className="form-control" name="first_name" component="input" type="text" />
            </div>

            <div className="form-group">
              <label className="label">Email</label>
              <Field className="form-control" name="email" component="input" type="email" />
            </div>

            <button className="btn btn-primary">{(updating_user_pending)?'Submitting...':'Submit'}</button>
         </form>
      );  
}

export default connect(mapStateToProps,mapDispatchToProps)(Users);

action. js

export function updateUserData(data, showResult){
    return function(dispatch){
        dispatch({type: UPDATE_USER_PENDING});
        fetch('https://reqres.in/api/users/'+data.user_id, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(res=>{
            if(res.status===200){
                dispatch({type: UPDATE_USER_SUCCESS});
                showResult();
            }else{
                dispatch({type: UPDATE_USER_FAILED});
            }
        })
        .catch(err=>{
            dispatch({type: UPDATE_USER_FAILED});            
        })
    }
}
0 голосов
/ 31 марта 2020

Похоже, то, что вы пытаетесь сделать здесь, это «побочный эффект» (или иногда просто «эффект»).

Побочный эффект - это, по сути, более короткий способ сказать: «Когда X происходит, также выполните Y". В вашем случае «Когда» обновление успешно завершено * также «Показать уведомление» - «Показать уведомление» является побочным эффектом «Успешное обновление».

Поскольку вы, вероятно, не хотите помещать свои логи c для «показа уведомления об успехе» внутри компонента пользовательской формы (поскольку он не является частью пользовательской формы), и вы также не хотите помещать его в ваш редуктор (потому что это не логика редуктора c). Вы хотите поместить его «где-то еще» - вы хотите поместить его в «побочный эффект» .

Есть Есть несколько библиотек, которые могут помочь с этим "эффектом бизнеса", и так как вы используете redux, почему бы не взглянуть на redux-saga ? Обратите внимание: это довольно большая зависимость, некоторые назвали бы это языком сам по себе. Но он очень мощный, особенно если вы создаете свое приложение с учетом этого.

Вы также можете создать свое собственное redux middleware , где вы слушаете действие UPDATE_USER_SUCCESS, и затем действуйте соответственно - Возможно, вызовите действие пыльника с именем ADD_SUCCESS_NOTICE wi Это сообщение или что-то подобное, а затем сделать какой-нибудь другой компонент, который где-то извещает об этом - обычно так я и делаю.

Если вы используете функциональные компоненты, то вы также можете использовать useEffect (и другие хуки), если вы используйте ответные зацепки .

Вы также можете реализовать некоторую обобщенную систему уведомлений c, например, "toasts". Вот учебник для этого .

...