Использование обещаний с React Redux - PullRequest
Новая
       15

Использование обещаний с React Redux

0 голосов
/ 05 декабря 2018

Я пытаюсь установить свое состояние Redux с некоторыми элементами, которые зависят от вызова API.

Это то, что у меня есть.

Вызов 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);
    });
});

И в моем componentDidMount () я попробовал несколько вещей, в том числе -> 

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), то это нормально.Я возвращаю массив предметов.

Что я здесь не так делаю?

1 Ответ

0 голосов
/ 05 декабря 2018

Насколько я понимаю, проблема в том, что вы передаете создателю действия обещание, а не действительное значение.

Создатель действия должен вызываться, когда у вас есть элементы, когда вызов API завершен иОбещание выполнено. 

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

Если вы используете «Реакцию», вы можете оформить «реакцию-избыточность», вы можете проверить подключение и привязать создателей действий к вашим реквизитам.Это более элегантно и легче работать с подходом.

Пример с использованием response-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)
...