Why adding spread operator make code returns empty array?

Question

Now, i am creating a book tracking app using react and redux, i need to fetch data asynchronously, and now i have 3 versions of code two of them return the expected result but not the third

The first one:

import { FETCH_BOOKS } from '../actions/Types.js';

import * as BooksAPI from '../BooksAPI'

export const bookReducer = (state = [], action) => {
   switch(action.type) {
      case FETCH_BOOKS:
         console.log (BooksAPI.getAll().then(books => books))

      default: 
         return state;
 }
}
//Promise {<pending>}
//this returns a promise in a pending state that is resolved to array of objects(expected)

The second one:

import { FETCH_BOOKS } from '../actions/Types.js';

import * as BooksAPI from '../BooksAPI'

export const bookReducer = (state = [], action) => {
  switch(action.type) {
     case FETCH_BOOKS:
        console.log ([BooksAPI.getAll().then(books => books)])

     default: 
        return state;
 }
}
//[promise]
//this returns an array of a promise that is resolved to array of another array of books objects(expected)

The third one:

import { FETCH_BOOKS } from '../actions/Types.js';

import * as BooksAPI from '../BooksAPI'

export const bookReducer = (state = [], action) => {
   switch(action.type) {
      case FETCH_BOOKS:
         console.log ([...BooksAPI.getAll().then(books => books)])

      default: 
         return state;
 }
}
//[]
//this returns an empty array, no promise
//expected spreading items of the returned array of objects not empty array!!

So what is wrong here??

Actually your third snippet will not even work because a Promise is not iterable. — Derek 朕會功夫
– Derek 朕會功夫, Commented Sep 28, 2018 at 2:31
That is right!! is there a way to achieve that @Derek 朕會功夫 — Saher Elgendy
– Saher Elgendy, Commented Sep 28, 2018 at 2:32
@SaherElgendy You're doing a thing that doesn't make sense from JS perspective, and no, there's no way to achieve that. There wouldn't be a bunch of middlewares like the answer lists if this would be possible with Redux itself. Consider using redux-promise if you want to address specifically promises. — Estus Flask
– Estus Flask, Commented Sep 28, 2018 at 8:08

Nicholas Tower · Accepted Answer · 2018-09-28 02:35:33Z

2

This isn't directly an answer to your question, but i wanted to point out that reducers need to be synchronous. If you want to do async stuff with redux you'll need to include an async middleware. Some popular options are:

redux-thunk (based around promises)
redux-saga (based around generators)
redux-observable (based around observables)

answered Sep 28, 2018 at 2:35

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why adding spread operator make code returns empty array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related