使用 redux-saga 多次连续更改状态后，React-redux 连接函数无法将状态映射到道具

Question

我有一个简单的减速器：

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

一个连接到 store 的组件：

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"));
};

当这些 action 被调度时，reducer 会连续更新 3 次，每个 action 一次。 这意味着状态发生了变化，每个连接的组件都应该反映这种变化。

问题是我的组件没有像我期望的那样重新渲染三遍。 也许是因为mapStateToProps太慢而无法注意到状态变化，或者当它注意到状态变化时，它包含与以前相同的值，因此不会渲染任何内容。

当我添加一个小的延迟（在我的浏览器中超过大约 35 毫秒）时，一切都开始工作：

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

并且组件按预期呈现。

有没有办法让 connect 函数在每次状态更新后渲染组件，而不会在 saga 中使用delay ？

在这里工作沙箱

Answer 1

我是 Redux 的维护者。

React-Redux 不保证您的 UI 代码将为每个分派的操作运行。 它仅保证它将使用商店中的最新值运行。

这是由于 React-Redux 如何管理对商店的订阅和传播更新的方式，以及 React 批量重新渲染的方式。