reactjs 如何在“updateCachedData”RTK查询中访问整个缓存

31moq8wy  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(103)

我有一个无限滚动在我的组件。我更新数据实时使用Web Socket连接。
假设每页有10个条目,现在我在第2页。
当我想要基于Web Socket更新前10个项目中的一个项目时,我不能访问前10个项目,因为我在第2页,而使用updateCachedData我只能访问第2页的结果。
我该怎么补救呢?

page 1 = [{a: 1}, {b: 1}, {c: 1}];
page 2 = [{e: 1}, {f: 1}, {g: 1}];

when page = 2;

updateCachedData(draft => {

// draft shows [{e: 1}, {f: 1}, {g: 1}];
// but I need to update page 1 to [{a: 1}, {b: 5}, {c: 1}]
// so when the user back to page 1, he can see the updated value.

})

在阅读了文档并感谢@markerikson之后,我找到了updateQueryData,但它没有启动。我错过了什么?

async onQueryStarted(
                arg,
                {
                    dispatch,
                    // getState,
                    // extra,
                    // requestId,
                    queryFulfilled
                    // getCacheEntry,
                    // updateCachedData
                }
            ) {
                try {
                    await queryFulfilled;
                    dispatch(
                        ApiSlice.util.updateQueryData('getOrderList', arg, (d) => {
                            console.log('draft', d);
                        })
                    );
                } catch (er) {
                    console.log('er', er);
                }
            },
    ```
gojuced7

gojuced71#

RTK Query还有一个updateQueryData API util thunk,可以使用缓存键来调度它,以更新特定的缓存条目:

  • https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils#updatequerydata

相关问题