Реагируйте: состояние Redux из mapStateToProps не обновляется после вызова диспетчеризации

Question

Когда я отправляю действие изнутри компонента (т. Е. Нажимается кнопка), состояние, которое изменяется в действии, не сразу обновляется в подпорках компонента. Я подключаю состояние и отправку реквизита через функцию подключения Redux. Я заметил, что он корректно обновляется при рендеринге компонента.

---

Game.jsx

const Game = ({ playerCards, add }) => {
  const stand = () => {};

  const hit = () => {
    add(getNextCard());
    console.log(playerCards); // Outputs the old state
  };

  return (
    <div className="container--center">
      <div className="container__inner--center">
        <div className="game-wrapper">
          <div className="game-wrapper__inner">
            <Player />

            <form className="player-actions">
              <button type="button" onClick={stand}>
                Stand
              </button>
              <button type="button" onClick={hit}>
                Hit
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default connect(
  (state) => {
    return {
      playerCards: state.cards.player,
    };
  },
  (dispatch) => {
    return {
      add: (card) => dispatch(addPlayerCard(card)),
    };
  }
)(Game);

действие addPlayerCard

const addPlayerCard = (card = {}) => {
  return {
    type: ADD_PLAYER_CARD,
    card,
  };
};

Answer 1

Первые обновления состояния являются асинхронными.

Во-вторых, когда вы отправляете add(getNextCard()), вы хотите обновить какое-то состояние в пользовательском интерфейсе для повторной визуализации, поэтому новое состояние будет доступно до следующей повторной визуализации и не имеет смысла пытаться получить новое состояние сразу после вызова диспетчеризации.

Таким образом, новое значение playerCards будет напечатано в пользовательском интерфейсе (в функции рендеринга).