React + Redux PUT API-запрос на редактирование данных в моем магазине

Question

Мое приложение использует redux для хранения данных из внутреннего API-интерфейса внутри редуктора сущностей избыточного хранилища, например, объекта данных MEMBER, который совместно используется несколькими компонентами в App для отображения сведений об элементах.Сейчас я реализую EditProfile компонент, который должен принимать данные из формы, отправлять их как запрос PUT в бэкэнд-API и, если запрос завершился успешно (выполнено до этого момента) обновить текущийЭлемент профиля участника в магазине приставок .Я пытаюсь найти что-то вроде «наилучшей практики» для достижения этого обновления в магазине.Я реализовал базовое промежуточное программное обеспечение API (аналогично тому, что было в примере с приложениями Redux для реального мира), но я не совсем уверен, , как достичь детали с помощью обновления состояния.

Mybackend api возвращает после запроса PUT только код состояния и причину (если ошибка) или memberId (если успех).Я не могу изменить внутреннюю конечную точку, чтобы вернуть новый объект профиля участника, потому что у нас есть еще один «глобальный» сервер помимо нашего веб-сервера, который работает так же, как этот, и я не могу его изменить.

Так что я думаю, что мне нужно будет сохранить данные из формы (response-final-form) и в случае успешного ответа, который содержит memberId (из серверной части), использовать эти данные для обновления текущей сущности хранилища Redux (профиль участника).

Я думал о сохранении данных запроса на обновление в хранилище редуктора сущностей -> с помощью ключа, такого как UPDATING_MEMBER_PROFILE, и запрос id заканчивается успешно, объедините эти два объекта в одну и очистите часть UPDATING_.Ребята, у вас есть предложения, пожалуйста?

ОБНОВЛЕНИЕ:

Чтобы вызвать API в моем коде, у меня есть такие действия:

memberAction.js

export const updateProfile = values => ({
type: API,
  payload: {
    url: "/members/update",
    method: "PUT",
    data: values,
    meta: {
      label: MEMBER_PROFILE,
      success: [], // action callbacks onSuccess
      error: [] // action callbacks onError
    }
  }
});

тогда мое промежуточное ПО API заботится о action.type === API и генерирует действия для типов API_REQUEST, API_SUCCESS и API_ERROR с сущностью и меткой из первых действий fetchProfile.Это выглядит так:

apiMiddleware.js

...getting Info from origin action about request here

next(action);
dispatch(apiRequest(entity, label));

return callApi(url, method, data)
  .then(response => {
    dispatch(apiSuccess(response.status, response, label));
    dispatch(success(response)); // Dispatch callbacks...
  })
  .catch(error => {
    dispatch(apiError(response.status, error, label));
    dispatch(error(response)); // Dispatch callbacks...
  });

и после промежуточного сервера и отправки других действий мой редуктор API назначит данные из API для хранения по сущности, например:

apiReducer.js

const apiEntitiesReducer = (state = {}, action) => {
  switch (action.type) {
    case API_REQUEST: 
      return {
        ...state,
        [action.payload.label]: {
          error: false,
          data: null
        }
      };
    case API_ERROR:
    case API_SUCCESS:
      return {
        ...state,
        [action.payload.label]: {
          error: action.isError,
          data: action.payload.data
        }
      };
    default:
      return state;
  }
};

это всего лишь псевдокоды, чтобы упростить его (и пока я не использую thunks ...).Поэтому мне нужно где-то (вероятно, в промежуточном программном обеспечении API) сохранить временные данные в хранилище (возможно, с помощью другого действия), чтобы достичь того, что мне нужно с помощью этого подхода?

Answer 1

Вы на правильном пути.Попробуйте отправить одно действие для отправки запроса в API, а затем (после успеха) отправьте другое действие, чтобы обновить ваш магазин.Примерно так

profile.js :

export const updateProfile = newMemberProfile => { //your action, using thunk here
  return dispatch => {
   fetch(UPDATE_URL, {
        method: "PUT",
        body: JSON.stringify(newMemberProfile),            
    })
    .catch(err => {
      console.log(err);
      alert("Profile update failed, please try again!");
    })
    .then(res => {
        dispatch(memberProfileUpdated(newMemberProfile));
    });
   }
}

export const memberProfileUpdated = newMemberProfile => {
  return {
    type: UPDATING_MEMBER_PROFILE,
    newMemberProfile
  };
};

Затем добавьте редуктор для этой константы (для ясности поместите все константы и редукторы в отдельные файлы) reducer.js :

const initialState = {
    memberProfile: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATING_MEMBER_PROFILE:
      return {
        ...state,
        memberProfile: action.newMemberProfile
      };
    default:
      return state;
  }
};

export default reducer;

Не забудьте зарегистрировать свой редуктор в своей конфигурации!Надеюсь, это поможет!