向后导航时 Redux 状态恢复到初始状态 React Navigation

Question

不确定这是否是预期的行为，但我正在尝试使用 React Navigation、React Native 和 Redux Toolkit 在页面导航之间保持状态。

所以我有一个全屏水平滚动列表，一次显示一个元素，以跟踪可见的页面我正在跟踪 view/array 中元素的活动索引。

所以我有我的状态：

type State = {
   pages: Array<{ id, title, name }>,
   activeIndex: number
}

每次用户滚动列表时，我都会获取可见的新项目的索引并更新状态。

// page slice
const initialState: State = {
    pages: undefined; // async call populates
    activeIndex: 0;
}
const PageListSlice = createSlice({
    name: 'State',
    initialState,
    reducers: {
        setActivePage(
            state: State,
            action: PayloadAction<{ index: number }>,
        ) {
            state.activeIndex = action.payload.index;
            return state;
        },
    }
});

export const setActiveIndex = (activeIndex: number): AppThunk => async (
    dispatch: AppDispatch,
) => {
    dispatch(setLearnState({index: activeIndex}));
};

并在组件装载上加载状态：

export const ListPage: React.FC<Props> = ({ navigation }): JSX.Element => {
    const dispatch: Dispatch<any> = useDispatch();
    const pageListSlice: State = useSelector((state: RootState) => state.PageState);

    useFocusEffect(
        React.useCallback(() => {
            console.log(pageListSlice.activeIndex); // always returns initial value of 0
        }, []),
    );

    return (
        // ...
    );
}

现在的问题是，当我使用 React Navigation 返回导航到该页面时，现有状态被初始状态替换。这是令人困惑的，因为现有状态仍然出现在屏幕上。我的意思是；我将导航回列表中的正确项目（我之前所在的位置），但状态将不正确。状态回到了初始状态，所以即使我在看索引 7 处的屏幕，来自 Redux 的状态也是初始值 0。

这是预期的行为吗？必须在缓存中存储状态以在页面导航之间持久保存状态对我来说似乎很疯狂。

我已经在子组件中加载了状态并且存在正确的状态，所以它似乎只是在您导航回页面时才恢复到初始状态。我已经尝试加载 state/adding 一个新的减速器以使用 useFocusEffect 启动，但那也是 returns 初始状态。

我已尝试尽可能简化此问题以隔离我面临的问题。我希望这是有道理的。欢迎大家帮忙，谢谢。

版本：

"@react-navigation/bottom-tabs": "^5.2.5",
"@react-navigation/native": "^5.1.4",
"@react-navigation/stack": "^5.2.9",
"@reduxjs/toolkit": "^1.4.0",
"expo": "^37.0.3",
"react": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
"react-redux": "^7.2.0",
"redux-thunk": "^2.3.0"

Answer 1

您的日志不正确，因为您向 React.useCallback 传递了一个空的依赖项数组，这意味着回调永远不会更新以获取正确的值。

如果您将正确的依赖项数组传递给 React.useCallback（在本例中为 pageListSlice.activeIndex），那么它将记录正确的值：

useFocusEffect(
  React.useCallback(() => {
    console.log(pageListSlice.activeIndex);
  }, [pageListSlice.activeIndex])
)

你应该使用 https://www.npmjs.com/package/eslint-plugin-react-hooks 插件来捕获此类错误。

向后导航时 Redux 状态恢复到初始状态 React Navigation

Redux state reverting to inital state when navigating backwards React Navigation

react-native

redux

react-redux

react-navigation

redux-toolkit