title: react, redux why button is not updating its view after click
body: <p>so i i've been building admin panel for my app, and main window is dashboard with the list of users, so i can delete, or verify them (for now);
  delete part is working fine here, but i struggle with update part (verification of user) when click on the button (ACTIVE) react sends request to server to verify user, and after that i want to update my table (this user with id 51 on which i clicked now should have status 'VERIFIED'instead of  'ACTIVE'</p>
  <p><a href="https://i.stack.imgur.com/1Ujk8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Ujk8.jpg" alt="enter image description here" /></a></p>
  <p>main questions are:</p>
  <ul>
  <li>why status doesn't update immediately after click, (it does updates after i click again on same status, but then server doesn't allow to send verification 2 times to same user)</li>
  <li>and how should i do this correctly so that status updates immediately after click, of course depending on what the response is from server</li>
  </ul>
  <p>code:</p>
  <p>Dashboard.jsx</p>
  <pre><code>const Dashboard = () =&gt; {
  const isAuth = useSelector(state =&gt; state.user.isAuth);
  const dashBoardUsers = useSelector(state =&gt; state.users);
  const dispatch = useDispatch()
  
  useEffect(() =&gt; {
  
      dispatch(getUsers);//axios request to get list of users
  
  }, [dashBoardUsers])
  
  function renderUsersTable() {
      dispatch(getUsers)
  
      return dashBoardUsers
      .sort(function(a, b) { return a.id &gt; b.id ? 1 : -1})
      .map((user, index) =&gt; {
              const { created, email, firstName, id, lastName, roles, status, updated, username, verificationTimesAsked } = user //destructuring
              return (
                  &lt;tr key={index}&gt;
                      &lt;td&gt;{id}&lt;/td&gt;
                      &lt;td&gt;{username}&lt;/td&gt;
                      &lt;td&gt;{email}&lt;/td&gt;
                      &lt;td&gt;{firstName}&lt;/td&gt;
                      &lt;td&gt;{lastName}&lt;/td&gt;
                      {/* &lt;td&gt;{handleStatus(user)}&lt;/td&gt; */}
                      &lt;td&gt;&lt;UserStatus user={user}/&gt;&lt;/td&gt;
                      &lt;td&gt;{created}&lt;/td&gt;
                      &lt;td&gt;{updated}&lt;/td&gt;
                      &lt;td&gt;{roles.map(r =&gt; r.name.split(&quot;_&quot;).pop()) + ','.slice(0, -1)}&lt;/td&gt;
                      &lt;td&gt;{verificationTimesAsked}&lt;/td&gt;
                      &lt;td&gt;&lt;button className=&quot;btn btn-danger&quot; disabled={hasAdminRole(roles)} onClick={() =&gt; deleteUserElement(id)}&gt;Delete&lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              )
          })
  }
  
  return (
      &lt;div style={{ marginLeft: '10px', marginRight: '10px' }}&gt;
          &lt;h1 className=&quot;text-center&quot;&gt;Users Dashboard&lt;/h1&gt;
          &lt;div className=&quot;text-center&quot; id=&quot;panel&quot;&gt;
              &lt;button type=&quot;button&quot; className=&quot;btn-light btn btn-outline-primary&quot; onClick={() =&gt; {
                  dispatch(getUsers());
              }}&gt;load users&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
  
          &lt;table id=&quot;usersTable&quot; className=&quot;table table-bordered&quot; style={{ marginTop: '15px' }}&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;{renderTableHeader()}&lt;/tr&gt;
                  {renderUsersTable()}
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  );
  };
  
  export default Dashboard;
  </code></pre>
  <p>userStatus.jsx:</p>
  <pre><code>const UserStatus = (props) =&gt; {
  const dispatch = useDispatch();
  const [currentStatus, setCurrentStatus] = useState(&quot;&quot;)
  
  useEffect(() =&gt; {
      setCurrentStatus(props.user.status);
      
  })
  
  return (
      &lt;div&gt;
  
          &lt;button type='button' className={currentStatus === 'ACTIVE' ? 'greenStatusButton' : 'blueStatusButton'}
              onMouseOver={(e) =&gt; mouseOverButtonColor(e, currentStatus)}
              onMouseLeave={(e) =&gt; mouseLeaveButtonColor(e, currentStatus)}
              onClick={(e) =&gt; handleStatusClick(props.user, e)}&gt;
              &lt;strong&gt;{currentStatus}&lt;/strong&gt;
          &lt;/button&gt;
  
      &lt;/div&gt;
  );
  
  function handleStatusClick(user, e) {
      console.log('status click userId: ');
      console.log(user.id);
      var answer = window.confirm(&quot;Verify user with id: &quot; + user.id + &quot;?&quot;);
      if (answer) {
          dispatch(verifyUser(user.id))
          e.target.style.backgroundColor = '#e1edff';
          e.target.style.color = '#607ac4';
          e.target.textContent = 'VERIFIED';
  
      }
      else {
      }
  }
  </code></pre>
  <p>reducer.js:</p>
  <pre><code>const SET_USERS = &quot;SET_USERS&quot;;
  const DELETE_USER = &quot;DELETE_USER&quot;;
  const VERIFY_USER = &quot;VERIFY_USER&quot;;
  
  const defaultState =
  [
  
  ]
  
  
  export default function userListReducer(state = [], action) {
  
  switch (action.type) {
      case SET_USERS:
          return [...action.payload]
      case DELETE_USER:
          
          return [...state.filter(user =&gt; user.id != action.payload)]
      case VERIFY_USER:
  
          return [...state.map(user =&gt; {return user.id === action.payload.id ? 
  action.payload : user} )]
          
          // return [...state.filter(user =&gt; user.id != action.payload)]   
      default:
          return state
  }
  }
  </code></pre>