title: showing success and error messages in react/redux app
body: <p>I'm trying to add toast notifications to my app, one plugin I've been trying to use is react-toastify.</p>
  
  <p>The issue I'm having is probably more a general react/redux issue more than with a plugin such as react-toastify.</p>
  
  <p>I'm using a reducer to set the redux state for errors and success messages, from what I understand with the current code, each error or success message is persistent in the store until another action is called to clear them.</p>
  
  <p>The issue I can't figure out is how do I trigger a toast only once. Eg. I enter the wrong credentials, it creates an error toast, but whenever the state changes and reloads (typing anything into the email or password fields) it creates another toast.</p>
  
  <p>How do I get it to only show once?</p>
  
  <p>userActions.js</p>
  
  <pre><code>function handleErrors(res) {
      if (res.ok) {
          return res.json();
      } else {
         return res.json().then(err =&gt; {throw err;});
      }
  }
  
  export const login = (user) =&gt; dispatch =&gt; {
      fetch(`${url}/login`, 
      {
          credentials: 'include', 
          method: 'post', 
          body: user, 
          headers: new Headers({
              'Content-Type': 'application/json',
              'Accept': 'application/json'
          })
       })
       .then(handleErrors)
       .then(res =&gt;
           dispatch({
               type: LOGIN,
               payload: res
           })
       )
       .catch(error =&gt; 
           dispatch({
               type: ERROR,
               payload: error
           })
       )
  }
  </code></pre>
  
  <p>userReducer.js</p>
  
  <pre><code>const initialState = {
      errors: '',
      success: ''
  };
  
  export default function(state = initialState, action) {
      switch (action.type) {
  
          case LOGIN:
              return {
                  ...state,
                  errors: '',
                  success: action.payload.message
              };
  
          case ERROR:
              return {
                  ...state,
                  success: '',
                  errors: action.payload.message
              }
  
          default:
              return state;
          }
  }
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>app.post('/login', function(req, res) {
      ... return res.status(500).send({ message: 'Wrong credentials' });
      ... return res.status(200).send({ message: 'good!' });
  });
  </code></pre>
  
  <p>login.js</p>
  
  <pre><code>class Login extends React.Component {
      constructor() {
          super();    
          this.state = {
              email: "",
              password: ""
          }
      }
  
      handleChange = event =&gt; {
          this.setState({
              [event.target.id]: event.target.value
          });
      }
  
      render() {
  
          const { errors, login, success } = this.props;
  
          if (success !== '') toast.success(success, {
              position: toast.POSITION.TOP_CENTER
          });
  
          if (errors !== '') toast.error(errors, {
              position: toast.POSITION.TOP_CENTER
          });
  
          return (
              &lt;div&gt;
                  &lt;input type="text" id="email" placeholder="Email Address" onChange={this.handleChange} /&gt;
                  &lt;input type="password" id="password" placeholder="Password" onChange={this.handleChange} /&gt;
                  &lt;button onClick={() =&gt; login(JSON.stringify({email: this.state.email, password: this.state.password}))}&gt;Log In&lt;/button&gt;
                  &lt;ToastContainer /&gt;  
              &lt;/div&gt;  
          )
      }
  }
  
  const mapStateToProps = state =&gt; ({
      errors: state.store.errors,
      success: state.store.success
  });
  
  export default connect(mapStateToProps, {login})(Login);
  </code></pre>