在React Redux中使用Promises

Question

我正在尝试用一些依赖于API调用的项来设置我的Redux状态。

这就是我到目前为止所拥有的。

Api呼叫->

return new Promise((resolve, reject) => {
const _items = [];
axios.get(SiteUrl + spQuery).then((response) => {
//console.log(response);
return response.data.d.results;
}).then((listItemsData) => {
......
_items.push({...});
return _items;
}).then((items) => { 
resolve(items);
});
});

在我的组件DidMount((中，我尝试了一些东西，包括->

store.dispatch(addListItem(this.updateSharepointList().then((result) => { return result })));

和

store.dispatch(addListItem(this.updateSharepointList()));

这两个调用都返回Promise对象(带有PromiseValue(，但如果我像//let test = this.updateSharepointList().then((result) => { console.log(result) }); 一样执行

我用console.log(test)，它很好。我取回了项目数组。

我在这里做错了什么？

Answer 1

据我所知，问题是您将承诺传递给了操作创建者，而不是实际值。

当您拥有项时，当API调用完成并解决承诺时，应该调用动作创建者。

this.updateSharepointList().then((result) => { 
store.dispatch(addListItem(result)) 
})

如果你正在使用react，你可以签出"react redux"，你可以将动作创作者连接并绑定到你的道具上。这是一种更优雅、更容易使用的方法

使用react redux的示例：

class MyComponent extends Component {
doSomething() {
this.updateSharepointList().then((result) => { 
this.props.addListItem(result);
})
}
}
const mapDipatchToProps = (dispatch) => ({
addListItem: (listItem) => dispatch(addListItem(listItem))
)}
const mapStateToProps = (state) => ({}) // used for getting state from store and mapping it to props 
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)