Redux 异步调度导致连接组件错误

Question

单击按钮时，会进行 API 调用（由 setTimeout 模拟），完成后，该项目会从状态中移除。我希望组件不会尝试渲染，但它会失败，因为它需要的状态不再存在。

The first fiddle 显示所需的行为有效，因为调度调用是同步的：

dispatch({
  type: 'REMOVE',
  id
}); 

The second fiddle 显示错误，因为调度调用是异步进行的：

setTimeout(() => {
  dispatch({
    type: 'REMOVE',
    id
  });   
 }, 0);

我假设父组件将不再尝试渲染子组件，因为该项目已从数组中过滤出来。如何从状态中删除项目并防止组件尝试重新渲染？

Answer 1

是的，这是一个问题，因为默认情况下 redux 不支持异步调用，所以你正在寻找它 redux-thunk

https://github.com/gaearon/redux-thunk

向下滚动到动机，它基本上与您在此处发布的代码完全相同。

:::编辑:::

根据您在下面的评论，我更新了您的代码，我认为问题的主要来源之一是将带有地图状态的 Item 组件连接到道具。

const mapStateToProps = (state, { id }) => {
    var {text} = state.items.filter((x) => x.id === id)[0];
    return {
    id: id,
    text: text
  };
};

const mapDispatchToProps = (dispatch) => {
    return {
    onRemove(id) {
        setTimeout(() => {
        dispatch({
            type: 'REMOVE',
          id
        }); 
     }, 0);
    }
  };
 };

我知道您可能不需要它/或不想要它，但我稍微重构了代码以使其更清晰一点，但我可能已经忘乎所以并将其与您的原始示例相去甚远，但如果您想看看它张贴在这里。

https://jsfiddle.net/kriscoulson/ogkyspsp/