Состояние Redux возвращается в исходное состояние при переходе назад React Navigation

Question

не уверен, что это ожидаемое поведение, но я пытаюсь сохранить состояние между навигацией по страницам с помощью React Navigation, React Native и Redux Toolkit.

Итак, у меня есть полноэкранный список горизонтальной прокрутки с одним видимым элементом за раз, чтобы отслеживать, какая страница видна, я отслеживаю активный индекс элемента в представлении / массиве.

Итак, у меня есть свое состояние:

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.

Это ожидаемое поведение? Мне кажется безумием сохранять состояние в кеше, чтобы сохранять его между переходами по страницам.

Я загрузил состояние в дочерние компоненты, и правильное состояние присутствует, поэтому он только кажется, возвращается в исходное состояние когда вы переходите на страницу назад. Я попытался загрузить состояние / добавить новый редуктор для запуска с использованием useFocusEffect, но это тоже возвращает исходное состояние.

Я попытался максимально упростить это, чтобы изолировать проблему, с которой я столкнулся . Я надеюсь это имеет смысл. Любая помощь приветствуется, спасибо.

Версии:

"@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 плагин для обнаружения таких ошибок.