Redux异步分派导致连接的组件错误

Question

单击按钮后，将进行API调用（由setTimeout模拟），完成后，将从状态中删除该项目。 我希望组件不会尝试呈现，但是它确实并失败了，因为它所需要的状态不再存在。

显示所需行为的第一个小提琴起作用了，因为对调度的调用是同步的：

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

第二个小提琴显示了错误，因为对调度的调用是异步进行的：

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

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

Answer 1

是的，这是一个问题，因为默认情况下，redux不支持异步调用，因此您正在寻找的东西redux-thunk

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

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

：：：编辑：：：

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

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/