在reducer中更新状态后如何重新呈现UI？

Question

我有一个已保存项目的列表，我希望它能够“取消保存”我想要的任何项目。 我已成功从保存的列表中删除了该项目，但必须重新加载页面才能显示更新后的列表（删除该项目后）。 如何在用户界面中即时更新？

在saved.js（减速器）中：

const initialState = {
  savedItems: [],
  }
...
case UNSAVE_ITEM: {
      if (!error) {
        const {user_un_favorite} = payload;
        if (user_un_favorite && user_un_favorite.ok) {
          const savedItems = state.savedItems || [];
          return {
            ...state,
            savedItems: savedItems.filter(i => i.id != payload.id)
          }
        }
      }
    }

在Saved.js屏幕中

...
 renderSavedCards = () => {
    const { savedItems } = this.props;
    return (
      <div className="list-right">
        {savedItems.map((item, index) => {
          return (
            <div>
              <div className="savedCard">
                <SearchCard
          
                 data={item.data}
                 
                />
                <span
                  className="deleteSaved"
                  onClick={(e) => {
                    e.stopPropagation();
                    this.props.unSaveItem(item.id);
                  }}
                >
                  <IcTrash className='trash-icon'/>
                </span>
              </div>
            </div>
          );
        })}
        {this.renderLoadMore()}
      </div>
    );
  };