Reactjのタイムアウトは？

Question

私は自分のウェブサイト用のnotiferコンポーネントをビルドしています。基本的には、1つのヒットは「追加」と言い、アイテムはウェブサイトの上部に「追加」されています。緑色のバーが表示され、「正常に作成されました」と表示されます。

1秒後に消えます。私はこれを行うための最善の方法は何でしょうか？それはどこかにjavascriptタイマーを持っているのですか？

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

アクション

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

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

リデューサー

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

通常、私はうなり声のようなものを使用しますが、私は（まあ、私はいくつかを見ましたreactjsために何も表示されませんでしたが、それらのどれもに見えました非常に人気があります）

Answer 1

あなたはredux-thunkを使用しているようですが、私はあなたのアクションcでタイムアウトを設定します通知を閉じる別のアクション、たとえばそれはCLOSE_NOTIFIERアクションを受信したときに

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

次に、あなたの減速だけで成功し、エラーの性質を無効にします。

これはコンポーネントの同期を維持し、最終的にはajaxリクエストをreduxで作成するときによく使用されるパターンと同じです。

Answer 2

あなたはこれを達成するために、単純なsetTimeoutを使用することができます。

（*編集*私はreduxとredux-thunkを使用するためのスニペットを更新しました）

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>