Функция соединения React-redux не может отобразить состояние на реквизит после нескольких последовательных изменений состояния с использованием redux-saga

Question

У меня есть простой редуктор:

// reducer.js
const itemId = (state = "", action) => {
  if (action.type === SET_ID) {
    console.log("reducer updated");
    return action.payload.id;
  }
  else {
    return state;
  }
};

Компонент подключен к магазину:

const Component = ({ itemId }) => {
  console.log("Component rendered");
  return <div> {itemId}</div>;
};

const mapStateToProps = state => ({
  itemId: state.itemId
});

export const ConnectedComponent = connect(mapStateToProps)(Component);

И сага с тремя действиями, где первый и последнее действие имеет одинаковую полезную нагрузку:

const createSetIdAction = id => ({
  type: SET_ID,
  payload: {
    id
  }
});

export const saga = function*() {
  yield put(createSetIdAction("FirstID"));
  yield put(createSetIdAction("SecondID"));
  yield put(createSetIdAction("FirstID"));
};

Когда эти действия отправляются, редуктор обновляется три раза подряд, по одному на каждое действие. Это означает, что состояние изменилось, и каждый подключенный компонент должен отражать это изменение.

Проблема в том, что мой компонент не рендерится три раза, как я ожидал. Возможно, из-за того, что mapStateToProps слишком медленный, чтобы заметить изменение состояния, или когда он замечает изменение состояния, он содержит то же значение, что и раньше, поэтому ничего не отображает.

Когда я добавляю небольшую задержку (в моем браузере более 35 мсек) все начинает работать:

// saga
  yield put(createSetIdAction("First_ID"));
  yield delay(35);
  yield put(createSetIdAction("Second_ID"));
  yield put(createSetIdAction("First_ID"));

, и компонент рендерится так, как ожидалось.

Есть ли способ заставить функцию соединения отобразить компонент после каждого обновления состояния, без использования delay в саге?

Рабочая песочница здесь

Answer 1

Я сопровождающий Redux.

React-Redux не гарантирует, что ваш код пользовательского интерфейса будет выполняться для каждого отдельного отправленного действия. Это только гарантирует, что он будет работать со значением latest из хранилища.

Это связано с сочетанием того, как React-Redux управляет подписками на хранилище и распространяет обновления, а также как то, как пакеты React перерисовываются.