使用React/redux添加/删除项目后刷新项目列表的方法

Question

我有一个组件<ItemPage />，用于呈现项目列表和添加项目的表单。

render() {
return (
<div>
<ItemsList />
<AddItemForm />
</div>
)
}

我的<ItemsList />有一个componentDidMount()方法，它调用redux-props函数this.props.items()来列出组件安装时的项目。

当使用<AddItemForm />组件添加项目时，将使用API POST请求将该项目添加到数据库中。

return dispatch => {
axios(options)
.then(response => {
dispatch({
type: ITEM_ADDED,
payload: response.data
});
})
.catch(error => {
return dispatch(handleError(error))
});
}

我应该如何刷新列表：

1. 我是否应该发出API GET请求以获取更新的项目列表
2. 我应该使用response.data来发送刚刚创建的项目对象吗

感谢您的帮助。

//====================编辑====================

如果我选择第一个选项，以下代码有效：

return dispatch => {
axios(postOptions)
.then(response => {
dispatch({
type: ITEM_ADDED,
payload: response.data
});
// getItems(); // <= unfortunately, this doesn't work.
axios(getOptions)
.then(response => {
dispatch({
type: ITEMS_FETCHED,
payload: response.data
});
})
.catch(error => {
return dispatch(handleError(error))
});
})
.catch(error => {
return dispatch(handleError(error))
});
}

有丑陋的代码重复，知道我已经有了一个提取项目的功能：

export function getItems() {
...
return dispatch => {
console.log('I am here') // <= when getItems() is inside addItem() function, 'I am here' is never displayed.
axios(options)
.then(response => {
dispatch({
type: ITEMS_FETCHED,
payload: response.data
});
})
.catch(error => {
return dispatch(handleError(error))
});
}
}

请问我该怎么修？

以及如何遵循"；函数应该只做一件事"；道德原则

Answer 1

我建议在POST请求成功后发出GET请求。这可以确保您从API中获得最新的项对象。

如果您想为自己保存一个GET，您可以从POST中获取响应，并将其附加到项目减少器状态值中。这并没有什么缺点，我只是一直更喜欢使用GET，因为你已经为它声明了一个操作，除非你的API是巨大的，否则它不应该导致任何延长或不必要的加载时间。

编辑

按照您当前使用它的方式，您不会碰到getItems，因为它是异步的。尝试将getItems放入另一个then中。请参见下文。

return dispatch => {
axios(postOptions)
.then(response => {
dispatch({
type: ITEM_ADDED,
payload: response.data
});  
})
.then(()=>getItems())
.catch(error => {
return dispatch(handleError(error))
});
}

在getItems中，用getOptions代替options。