行动派遣后无法获得新道具

Question

I have a React component:

class Board extends React.Component { 
  // ...
  compareLastPair() {
    const {gameplay} = this.props;
    console.log('after dispatching, before compare', gameplay.clickedTiles); //-> [1] 

    // i got old state as before dispatching an action, but expected refreshed props
    // thus, condition below never executes 

    if(gameplay.board.length === gameplay.pairedTiles.length + gameplay.clickedTiles.length) {
      this.compareTiles();
    }
  }

  handleClick(id) {
    const {gameplay, dispatch} = this.props;
    // ...some code
    else if(!gameplay.clickedTiles.includes(id) && gameplay.clickedTiles.length < 2) {
      console.log('before dispatching', gameplay.clickedTiles); // -> [1]          
      dispatch(clickTile(id));
      this.compareLastPair();           
    }
  }
  //...
}

My reducer dispatches sync action:

 const gameplay = (state = {board: [], clickedTiles: [], pairedTiles: [], round: 0}, action) => {
      switch(action.type) {
        case 'CLICK_TILE':
          return {...state, ...{clickedTiles: state.clickedTiles.concat(action.id)}} 
       }
    }

My question is: why my compareLastPair function gets the same props as before dispatching in handleClick function, despite the fact that the state was updated by Redux(you can see it in Redux-logger at the image) and clickedTiles array should be concantenated by reducer.

Answer 1

Even if your dispatch action is synchronous (but we don't know... you didn't shared the code), props update in the React component follow the normal asynchronous lifecycle, while you are explicitly calling compareLastPair after the dispatch.

React/Redux do not work this way: new props will be received by your component after your call.

For your test, I suggest you to call compareLastPair inside the componentDidUpdate lifecycle method, which is called after prop changes.