0

Okey, after several hours of searching for the solution, i need to post a question about this.

Ive read x amounts of threads and tried "connecting" the component with state, different promise callbacks, ive tried setTimeout (big nono, i know), ive tried updating on componentDidMount, componentWillMount, componentDidUpdate etc. Ive tried forceUpdate(). In fact, state is uppdated and contains the "productlist" with updated data from Firebase. It seems as though the component renders without this data.

Function fetching data from firebase: 

function updateProducts(endpointstring) {
let initialList = [];
let productsList = [];
function getData(endpoint) {
    let productsRef = database.ref('products/' + endpoint);
    return productsRef.once('value').then(function (snapshot) {
        return snapshot.val()
    })
}
Promise.all([getData(endpointstring)]).then( (response) => {
    for(var product in response){
        productsList.push(response[product])
        console.log(productsList)
    }
})
return productsList;

}

Reducer:

import * as firebase from 'firebase';
const database = firebase.database();

function updateProducts(endpointstring) {
    let initialList = [];
    let productsList = [];
    function getData(endpoint) {
        let productsRef = database.ref('products/' + endpoint);
        return productsRef.once('value').then(function (snapshot) {

            let list = [];
            for(var prod in snapshot.val()){

                list.push(snapshot.val()[prod])
            }
            return list
        })
    }
   var newList = getData('mobiles');
        for(var product in newList){
            productsList.push(newList[product])
            console.log(productsList)
        }

    return getData('mobiles');;
}


const mobilesReducer = (state = {
    view: "everything",
    filteredValue: "",
    productInFocus: 0,
    products: updateProducts('mobiles'),
    imgLoads: [],
    loadedOnce: false,
    priceRange: {min: 0, max: 3500},
    minPrice: 0,
    maxPrice: 3500,
    sort: "popular"

}, action) => {

    let newState = {...state};

    switch(action.type){

        case 'COMPONENT_DID_MOUNT':
            console.log(action.payload)
            action.payload.componentName === 'mobiles' ? newState = {...newState, products: action.payload.productList} : null;
            return newState;

Anybody has a different take in this?

Thanks.

niknau
  • 61
  • 1
  • 10
  • 2
    How are supposed to help without seeing any of your code? Are we supposed to just dump random guesses? Create a [mcve]. –  Oct 19 '17 at 23:42
  • How do you know the Redux state has changed? Can you show your reducer? – Scott Oct 19 '17 at 23:43
  • 1
    Promises are asynchronous. You're logging the updated `productsList`, but when you return it at the end, it's still `[]`. –  Oct 19 '17 at 23:47
  • 1
    Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) –  Oct 19 '17 at 23:47
  • 1
    @Scott Thank you for your constructive reply. I know because the middleware shows pre- and next state. Next state contains the fetched data. I'll add the reducer as well as the action which I run on componentWillMount. – niknau Oct 19 '17 at 23:49

0 Answers0