Wednesday, 28 July 2021

getState() in redux giving different userId in react native

In my app, I am trying to add a new product that uses getState().userId as a key so that If I use the same email I will see that added product in my admin section but sometimes, I am not able to add product, and my app giving me an error saying: VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor.

So, for debugging purposes, I checked the getState.userId I am getting and I get different userId from redux that's why I can't see my product in my admin area as I have added their ownerId===userId.

But, After reloading or refreshing the app, I am able to see my product there and also able to add product with the correct userId on firebase.

store/action/product.js:

import { createAsyncThunk } from "@reduxjs/toolkit";

import Product from "../../models/Product";

export const CREATE_PRODUCT = "CREATE_PRODUCT";
export const SET_PRODUCT = "SET_PRODUCT";

export const fetchProducts = () => {
  return async (dispatch, getState) => {
    const userId = getState().Auth.userId;
    try {
      const response = await fetch(
        "https://shopping-app-62e38-default-rtdb.firebaseio.com/products.json"
      );

      if (!response.ok) {
        throw new Error("Something went wrong!");
      }

      const resData = await response.json();
      const loadedProducts = [];

      for (const key in resData) {
        loadedProducts.push(
          new Product(
            key,
            resData[key].ownerId,
            resData[key].title,
            resData[key].imageUrl,
            resData[key].description,
            resData[key].price
          )
        );
      }
      dispatch({
        type: SET_PRODUCT,
        products: loadedProducts,
        userProducts: loadedProducts.filter((prod) => prod.ownerId === userId),
      });
    } catch (error) {
      throw error;
    }
  };
};


export const createProduct = (title, description, imageUrl, price) => {
  return async (dispatch, getState) => {
    const token = getState().Auth.token;
    const userId = getState().Auth.userId;
    console.log(getState());
    const response = await fetch(
      `https://shopping-app-62e38-default-rtdb.firebaseio.com/products.json?auth=${token}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          title,
          description,
          imageUrl,
          price,
          ownerId: userId,
        }),
      }
    );
    const resData = await response.json();
    console.log(userId);

    dispatch({
      type: CREATE_PRODUCT,
      productData: {
        id: resData.name,
        title,
        description,
        imageUrl,
        price,
        ownerId: userId,
      },
    });
  };
};

I tried adding a product. But I got same error mentioned above.

console.log()- getState() :

"Auth": Object {
    "token": "9WwCUWtUeDaeHPHfURuBMSAaT553",
    "userId": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjFiYjk2MDVjMzZlOThlMzAxMTdhNjk1MTc1NjkzODY4MzAyMDJiMmQiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vc2hvcHBpbmctYXBwLTYyZTM4IiwiYXVkIjoic2hvcHBpbmctYXBwLTYyZTM4IiwiYXV0aF90aW1lIjoxNjI3MDY5NTM1LCJ1c2VyX2lkIjoiOVd3Q1VXdFVlRGFlSFBIZlVSdUJNU0FhVDU1MyIsInN1YiI6IjlXd0NVV3RVZURhZUhQSGZVUnVCTVNBYVQ1NTMiLCJpYXQiOjE2MjcwNjk1MzUsImV4cCI6MTYyNzA3MzEzNSwiZW1haWwiOiJ0ZXN0QGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGdtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.Yq2CjY7anrwuQSt2N5nMSa3vUKh1gFiIuyO1Mw4-WQwbf_y9b9IYOHSG1YkXgFoyONOV71DOlT9JmWzGu9g2aFSKKUU3LffTY5WNQd5-Qm9QdbhHB0CtOAPJZ124FKiLLS0wJh0nVZKez8_6dH2ICOCw3e-lyktHOc6R11s_9xhEF1LLYv20b7BziWy6T_VHZOcUsiJbBwn09lx1SKkK4Ic3iEsWNeg-lSAgPJGO-sClUmwW9ffA3L1p8OvZubSNirKcGbRYkC323wXnlWv-tqqj6CW-uNc448i6qsmrs2RRR_f4WdLFN9dvv_PBjsf7V8r0m_HY4jjDzScNLLA4Hg",
  },
  "cart": Object {
    "items": Object {},
    "totalAmount": 0,
  },
  "orders": Object {
    "orders": Array [],
  },
  "products": Object {
    "availableProducts": Array [
      Product {
        "description": "Apple Macbook Air M1 chip",
        "id": "-Md76UnJ1I1lNhGgldH3",
        "imageUrl": "https://www.zdnet.com/a/hub/i/r/2020/11/23/77824151-c578-4431-8f00-633b1b7c0b99/thumbnail/770x433/3b5a2366cdeef2dc08730041abdcf426/macbook-air-m1-header.jpg",
        "ownerId": undefined,
        "price": 1200,
        "title": "Macbook Air M1 2020",
      },
      Product {
        "description": "Apple · iPhone 64GB Blue· iPhone 12 mini · iOS · 5.4 inches screen · Facial Recognition · 12 MP Front Camera · 12 MP Rear Camera · Smartphone · Wireless Charging",
        "id": "-Mekel4gfFtgNUviidau",
        "imageUrl": "https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcS_WPpNagW5q_-KAep1QkiInHfUYADs8qv84Z_FqKwMmW-J7nleMbl5y6muot5dxxRCOBZ-S_dYxxp_QpmTqzSnTj9oKQuH84kSCYjAZXT6UIsrnWJowbMMLw&usqp=CAE",
        "ownerId": "9WwCUWtUeDaeHPHfURuBMSAaT553",
        "price": 956.99,
        "title": "Apple iPhone 12 Mini",
      },
    ],
    "userProducts": Array [],
  },
}

console.log()-userID:

eyJhbGciOiJSUzI1NiIsImtpZCI6IjFiYjk2MDVjMzZlOThlMzAxMTdhNjk1MTc1NjkzODY4MzAyMDJiMmQiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vc2hvcHBpbmctYXBwLTYyZTM4IiwiYXVkIjoic2hvcHBpbmctYXBwLTYyZTM4IiwiYXV0aF90aW1lIjoxNjI3MDY5NTM1LCJ1c2VyX2lkIjoiOVd3Q1VXdFVlRGFlSFBIZlVSdUJNU0FhVDU1MyIsInN1YiI6IjlXd0NVV3RVZURhZUhQSGZVUnVCTVNBYVQ1NTMiLCJpYXQiOjE2MjcwNjk1MzUsImV4cCI6MTYyNzA3MzEzNSwiZW1haWwiOiJ0ZXN0QGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGdtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.Yq2CjY7anrwuQSt2N5nMSa3vUKh1gFiIuyO1Mw4-WQwbf_y9b9IYOHSG1YkXgFoyONOV71DOlT9JmWzGu9g2aFSKKUU3LffTY5WNQd5-Qm9QdbhHB0CtOAPJZ124FKiLLS0wJh0nVZKez8_6dH2ICOCw3e-lyktHOc6R11s_9xhEF1LLYv20b7BziWy6T_VHZOcUsiJbBwn09lx1SKkK4Ic3iEsWNeg-lSAgPJGO-sClUmwW9ffA3L1p8OvZubSNirKcGbRYkC323wXnlWv-tqqj6CW-uNc448i6qsmrs2RRR_f4WdLFN9dvv_PBjsf7V8r0m_HY4jjDzScNLLA4Hg

After some refresh or log in again, I am able to see my product added before and which was already on firebase now fetched from and shown on admin area as I am getting correct userId from getState().

Note: The product I tried above is not added but some products I already added and which were not fetched as userId I am getting is incorrect.

When I am getting the correct userId from firebase which is also my ownerId then I am able to see my product in my admin area.

I am getting idToken in userId instead of localId. I don't know why and how to solve this.



from getState() in redux giving different userId in react native

No comments:

Post a Comment