Редукционный магазин обновляется, но изменения не отображаются на некоторых экранах

Question

Я обновляю профиль пользователя в хранилище при помощи некоторого текстового ввода.Информация о пользователе отображается на трех экранах.

1. На экране userDetail, который использует useSelector для поиска пользователя из списка пользователей с помощью идентификатора.Здесь экран отображает изменения, внесенные в хранилище приставок.

2. На экране UserSummary.На этом экране отображаются данные пользователя для пользователя, где пользователь может затем нажать кнопку редактирования и перейти к экрану (3), где есть текстовые вводы, и пользователь может редактировать их данные.

3. на экране EditDetails.Это где есть текстовые входы.Пользователь может редактировать детали, и хранилище в приставке обновляется.

Однако после сохранения изменений и перехода к предыдущему экрану (2) с использованием props.navigation.goBack(); экран 2 выполняетне отражать изменения, которые я только что сделал в магазине редуксов.Если я перейду к экрану (1), я смогу увидеть внесенные изменения.Точно так же, когда я перехожу к деталям на экране (3), отображаются изменения, которые были сделаны при первом редактировании.Это просто screen (2), который не показывает никаких изменений, которые были сделаны.

Я получаю текущего пользователя, используя const currentUser = useSelector(state => state.users.currentUser); на всех экранах, и оттуда я получаю доступ к дочерним свойствам пользователя, таким как имя, адрес, биографияи т.д.

Мое начальное состояние для редуктора моих пользователей:

const initialState = {
    availableUsers: USERS,
    currentUser: USERS.find(user => user.id === 'b1')
};

Я еще не подключил его к серверу, поэтому я просто использую фиктивного пользователя в качестве текущего пользователя, вошедшего в систему..

Ниже приведена логика обновления информации о пользователе в моем редукторе user.js.

case UPDATE_USER:
    const serveMale = action.updateInfo.male;
    const serveFemale = action.updateInfo.female;
    const newDescription = action.updateInfo.description;
    state.currentUser.Male = serveMale;
    state.currentUser.Female = serveFemale;
    state.currentUser.description = newDescription

    return {
        ...state
    }

Я четыре раза проверил в отладчике, что мой магазин обновляется правильно, и это явнопоказано на моем экране (1), который показывает правильно обновленную информацию.Это просто экран (2), который вызывает у меня проблемы.

ОБНОВЛЕНИЕ:

Я наконец-то заработал.Я думаю, что проблема заключалась в том, что я обновлял только currentUser в initialState, а не currentUser во всем массиве USERS.Я не знаю, почему это сработало, но это сработало.Вот код.

Сначала я нашел индекс текущего пользователя в массиве всех пользователей.Затем сделал класс newUser, объединяющий старую и новую информацию.Затем замените currentUser и availableUsers[userIndex] новым пользователем и верните состояние.

case UPDATE_USER:
    const userIndex = state.availableUsers.findIndex(user === user.id === action.id);

    const serveMale = action.updateInfo.male;
    const serveFemale = action.updateInfo.female;
    const newDescription = action.updateInfo.description;

    const newUser = new User(
        state.currentUser.id,
        state.currentUser.name,
        state.currentUser.workId,
        state.currentUser.years,
        state.currentUser.imageUrl,
        serveMale,
        serveFemale,
        newDescription,
    )
    state.availableUsers[userIndex] = newUser;
    state.currentUser = newUser;
    return {
        ...state                
    }

Answer 1

В редукторе вы тоже изменяете состояние.Но не уверен, что это может быть причиной проблемы.

обновление должно выглядеть следующим образом:

`case UPDATE_USER: const {мужской, женский, описание} = action.updateInfo;

return {
    ...state,
    currentUser: {
      male,
      female,
      description
    }
}

`

Запись state.currentUser.Male = serveMale фактически изменяет фактический объект состояния, даже если вы возвращаете новый.

Answer 2

Это может быть связано с тем, что вы используете props.navigation.goBack(), который лишь указывает вам на точку в истории сеансов, где сохраненная информация не содержит ничего о ваших изменениях.Попробуйте использовать pushState() или push() (если вы используете React Router) для навигации после обновления вашего магазина.