React Native Redux 状态更新保持导航调用

React Native Redux State Update Holds Navigation Call

提问人:denistepp 提问时间:11/12/2023 更新时间:11/12/2023 访问量:25

问:

我的 react native 应用程序中有两个页面:

  1. 显示带有 s 和 s 的数据列表。通过按下 item,我们应该在 redux 中设置当前数据类型的 ID,并通过在 redux slice 中查找一个包含所有 .然后,我们导航到下一页。idtitlestate.currentdata

例:

    setCurrentData: (state, action) => {
      state.current = dataAdapter
        .getSelectors()
        .selectById(state, action.payload.id)
    },

选择:

export const getCurrentCommunity = state => state.allData.current
  1. 第二页通过调用获取数据并显示。useSelector(getCurrentCommunity)

一切正常,我从 redux 正确传递/获取数据。问题在于,导航前的计算速度非常慢。在 redux 中设置数据运行速度很快(显示良好的结果),但是在状态更新之后的某些东西会阻止我的导航调用。performance.now()

当然,我可以将数据作为参数传递,但这不是一个选项,因为稍后我想在不将任何内容传递给通用组件而不路由的情况下获取它。

我能做些什么来加快 redux 状态更新并使我的导航调用更快?

顺便说一句,如果我删除 Redux 状态设置器,导航工作完美,延迟 70-80 毫秒(与 Redux 的 2-3 秒相比)

react-native redux 反应导航

评论


答:

1赞 phry 11/12/2023 #1

省去这个操作 - 在商店中复制数据是一种不好的做法,像这样的派生数据应该只是选择器的一部分。setCurrentData

相反,只需设置当前页面 ID(如果有必要)

    setCurrentId: (state, action) => {
      state.currentId = action.payload.id
    },

const dataSelectors = dataAdapter.getSelectors(state => state.allData)
export const getCurrentCommunity = state => dataSelectors.selectById(state, state.allData.currentId)

甚至完全跳过该操作:

const dataSelectors = dataAdapter.getSelectors(state => state.allData)
export const getCurrentCommunity = (state, id) => dataSelectors.selectById(state, id)

并调用

useSelector(state => getCurrentCommunity(state, idFromNavigationProp)

评论

0赞 denistepp 11/13/2023
这是一个有趣的方法,我稍后会尝试一下并回复,谢谢!