如何在异步实体创建(POST)后使用react和redux-thunk刷新实体列表(GET)

Question

在异步POST调用后，我面临着如何在react组件中使用redux刷新数据的问题。我已经在使用一个redux中间件来管理我的rest调用。

用例：

1. 在react组件内部，用户创建一个新元素(通过REST-API将数据异步发送到后端(
2. 在同一个react组件中，我有一个可选列表，该列表现在也应该包含新元素(带有生成的数据库ID(

在后端更新实体并随后刷新依赖列表的最佳反应+redux paradigma是什么？

向Sven 致以最良好的问候

Answer 1

对于像进行Rest调用这样的异步操作，您需要像thunk或saga这样的中间件来基于异步响应调度操作。这就是您的创建应该如何在中间件的高级别上工作：

1. 使用有效负载调度创建操作
2. 中间件将发出rest调用来创建对象
3. 根据返回的响应，中间件将向商店发送进一步的操作，例如将新项目添加到列表中

Answer 2

感谢你的提示，我刚刚找到了答案。

Redux(带有Redux-thunk中间件(可以开箱即用地处理我的情况。只需将两个操作合并到一个"包装器操作"中即可。

Redux将异步执行"包装器操作"。但是，由于我在"包装器操作"中的"等待"语句，我的POST和GET请求将以正确的顺序同步调用，并且每个请求都会根据需要更新我的redux存储。

请参阅：https://github.com/reduxjs/redux-thunk

export const createEntityAndReloadEntities: ICrudPutAction<IEntityProfile> = newEntity => async dispatch => {
return Promise.all[
	await dispatch({
	type: "CREATE_ENTITY",
	payload: axios.post(apiUrl, newEntity)
	}),
	await dispatch({
	type: "FETCH_ENTITY_LIST",
	payload: axios.get<IEntityProfile>(`${apiUrl}`)
	})];
};