reactjs Redux工具包-发送后刷新存储

cbeh67ev  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(114)

我在Redux上遇到了一个问题,希望你能帮助我。因此,我提取了一些存储变量,以便在我的页面中使用它们:

const {
  selectedRows,
  searchCriteria: { name, type},
  cookies: { pageNumber, pageSize },
} = useSelector((store) => store.cookiesSearch);

在从表中选择了一些行之后,我按下一个按钮,另一个页面将有条件地呈现在包含cookie表的页面上,我将在那里执行一些操作,然后我想刷新我的存储数据,用操作后修改的新数据再次填充表。在我的按钮的onClick操作中,我有如下内容:

onClick={() => {
  dispatch(changeCookies());
  // after this I want to refresh the cookies list from the table
  // the next dispatch have to change pageNumber to 1, pageSize to 10 and the cookies list to []
  dispatch(refreshCookiesList())
  // the problem is that here the dispatch will use the old pageNumber and pageSize. for example if before the onClick action I was at page 3 in the table, the new rendered cookies list will be affected and the getCookiesList action will bring me the cookies from the third page 
  dispatch(getCookiesList({ pageNumber, pageSize })) 
}}

我希望在changeCookies操作之后,表被刷新并从第1页开始。对此,您有任何可能的修复方法吗?我如何刷新存储数据?

lmvvr0a8

lmvvr0a81#

Redux默认是同步的,所以我们在存储中添加了中间件。有两个解决方案thunk或redux-saga。我猜你使用的是带有thunk的redux-toolkit。在redux-toolkit中,你有createAsyncThunk函数,允许进行异步操作并分派它们。这里你可以访问getState,所以你不需要从外部传递{ pageNumber, pageSize }(从组件),但您可以直接从存储中获取它。

export const getCookiesList = createAsyncThunk('cookiesSearch/getCookiesList', (_, { getState }) => {
 const const {
  selectedRows,
  searchCriteria: { name, type},
  cookies: { pageNumber, pageSize },
  } = getState().cookiesSearch 
// do stuff
})

Thunks作为同步函数被调度,因此您可以等待(在本例中,如果您希望数据同步,甚至必须等待):

onClick={async () => {
  await dispatch(changeCookies());
cookies list to []
  await dispatch(refreshCookiesList())
  dispatch(getCookiesList({ pageNumber, pageSize })) 
}}

相关问题