Timeouts in Reactjs?

Question

Ich baue eine Notifer-Komponente für meine Website. Im Grunde eine, die Sie sagen, "hinzufügen" und der Artikel ist "hinzugefügt" auf der Oberseite meiner Website eine grüne Leiste wird kommen und sagen "erfolgreich erstellt"

Jetzt nach einer Sekunde möchte ich es verschwinden. Ich bin mir nicht sicher, was der beste Weg wäre, dies zu tun? Ist es irgendwo ein Javascript-Timer?

import React from 'react'; 

import 'materialize-css/sass/materialize.scss'; 
import 'font-awesome/scss/font-awesome.scss'; 

import 'materialize-css/js/materialize.js'; 
import classNames from 'classnames/index.js'; 

export default class Notifer extends React.Component { 
    render() { 
     var notifcationClasses = classNames({ 
      'notifcation-success': this.props.notiferReducer.success, 
      'notifcation-error': this.props.notiferReducer.error, 
      'hide': !(this.props.notiferReducer.success || this.props.notiferReducer.error) 
     }); 
     return (
      <div id="notifcation" className={notifcationClasses}> 
       Sucessfully created 
      </div> 
     ); 
    } 
} 

Aktion

import {actions} from './Actions.js'; 

export function setNotifer(success) { 
    return function (dispatch) { 
     dispatch({ type: actions.SET_NOTIFIER, payload: success }); 
    }; 
} 

Reducer

import { actions } from '../actions/Actions'; 

export default function NotiferReducer(state = { 
    success: false, 
    error: false 
}, action) { 
    switch (action.type) { 
     case actions.SET_NOTIFIER: { 
      return { 
       success: action.payload, 
       error: !action.payload 
      }; 
     } 
    } 
    return state; 
} 

Normalerweise würde ich so etwas wie Knurren benutzen, aber ich habe nichts gesehen für reactjs (auch ich habe einige, aber keiner von ihnen sehen schien sehr beliebt sein)

Answer 1

Da es so aussieht, als ob du redux-thunk verwendest, würde ich ein Timeout in deiner Aktion setzen c reator, um eine weitere Aktion zum Schließen der Benachrichtigung auszulösen, z.

import {actions} from './Actions.js'; 

export function setNotifer(success) { 
    return function (dispatch) { 
     dispatch({ type: actions.SET_NOTIFIER, payload: success }); 
     setTimeout(() => dispatch({ type: actions.CLOSE_NOTIFIER }), 1000) 
    }; 
} 

Dann würde Ihr Minderer zunichte machen nur die Erfolgs- und Fehlereigenschaften, wenn es um die Aktion CLOSE_NOTIFIER erhält.

Dies würde Ihre Komponenten synchron halten und es ist letztlich das gleiche Muster, das häufig verwendet wird, wenn Ajax-Anfragen in redux gemacht werden.

Answer 2

Sie können einen einfachen setTimeout verwenden, um dies zu erreichen:

(* edit * Ich das Snippet aktualisiert haben redux und redux-thunk zu verwenden)

const { Component } = React; 
 
const { render } = ReactDOM; 
 
const { createStore, combineReducers, applyMiddleware } = Redux; 
 
const { connect, Provider } = ReactRedux; 
 

 
const message = (state = null, action) => { 
 
    switch (action.type) { 
 
    case 'SET_NOTIFICATION': 
 
     return action.message; 
 
    default: 
 
     return state; 
 
    } 
 
}; 
 

 
const setNotification = (message, duration) => (dispatch, getState) => { 
 
    dispatch({type: 'SET_NOTIFICATION', message: message}); 
 
    setTimeout(() => { 
 
    dispatch({type: 'SET_NOTIFICATION', message: null}); 
 
    }, duration); 
 
}; 
 

 

 
const store = createStore(
 
    combineReducers({message: message}), 
 
    applyMiddleware(ReduxThunk.default) 
 
); 
 

 
class App extends Component { 
 
     
 
    showMessage =() => { 
 
    this.props.dispatch(
 
     setNotification('This message will self destruct in 3 seconds', 3000) 
 
    ); 
 
    }; 
 

 
    render() { 
 
    return (
 
     <div> 
 
     {this.props.message && <div className="message">{this.props.message}</div>} 
 
     <br /> 
 
     <button onClick={this.showMessage}>Click to show message</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
App = connect(
 
    state => ({ message: state.message }) 
 
)(App); 
 

 
render(
 
    <Provider store={store}> 
 
    <App /> 
 
    </Provider>, 
 
    
 
    document.getElementById('app') 
 
);

.message { 
 
    border: 1px solid green; 
 
    background-color: rgba(0,255,0, 0.1); 
 
    border-radius: 4px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://npmcdn.com/redux@3.5.2/dist/redux.min.js"></script> 
 
<script src="https://npmcdn.com/redux-thunk@2.1.0/dist/redux-thunk.min.js"></script> 
 
<script src="https://npmcdn.com/react-redux@4.4.5/dist/react-redux.min.js"></script> 
 

 
<div id="app"></div>