React + Redux PUT api 请求编辑我的 redux 存储中的数据

Question

我的应用程序正在使用 redux 将后端 API 中的数据保留在 redux 存储实体缩减器内，例如数据的 MEMBER 对象，该对象在应用程序中的多个组件之间共享以显示成员详细信息。现在我正在实现EditProfile组件，它应该从表单中获取数据，将其作为 PUT 请求发送到后端 API，如果请求成功结束(完成到这里(更新redux 存储中的当前成员配置文件实体。我正在尝试找到类似"最佳实践"的东西来访问此 redux 存储更新。我已经实现了基本的 api 中间件(类似于 Redux 实际应用程序示例中的中间件(，但我不完全确定如何达到状态更新的部分。

我的后端 api 在 PUT 请求后仅返回状态代码和原因(如果错误(或 memberId(如果成功(。我无法更改后端端点，以返回新的成员配置文件对象，因为我们在 Web 服务器之外还有另一个"全局"服务器，它的工作方式与此服务器相同，我无法更改它。

所以我认为我需要从表单(反应最终形式(中持久化数据，并且在成功响应中包含 memberId(来自后端(的情况下，使用此数据更新当前的 Redux 存储实体(成员配置文件(。

我正在考虑将更新请求数据保存到存储实体 reducer -> 使用像 UPDATING_MEMBER_PROFILE 和 id 请求以成功结束这样的键，将这两个对象合并为一个并清除UPDATING_部分。请问你们有什么建议吗？

更新：

要在我的代码中调用API，我有这样的操作：

成员操作.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 操作的实体和标签。它看起来像：

api中间件.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，然后(成功后(调度另一个操作以更新您的商店。类似的东西

简介.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
};
};

然后为此常量添加一个化简器(为清楚起见，将所有常量和化简器放在单独的文件中(减速机.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;

不要忘记在您的配置中注册您的减速器！ 希望对您有所帮助！