React Redux: data not fetching from reducer to the components?

26 Views Asked by At

I am getting the data from api. API response contains formId and pdf. I am storing the formId value in the reducer. I tried to fetch the formId value from reducer to any component of the application. Currently, formId value is not coming from reducer. Component1, I got the data from api response and store formId in the reducer. Component2, I am reading the formId value from the reducer. Please check why formId value is not coming from reducer. Please help. API response is: Resultform: {data: {…}} data: formId: "37000555" pdf: "JVBERi0xLjcNJeLjz" [[Prototype]]: Object

I put the console.log in the reducer file and I can see the formId value.

PROBLEM: How to read the stored value from reducer?

**Reducer.js**

import * as types from "./actions";

export const initialState = {
  pdfData: "",
  pdfURL: "",
  pdfLoaded: false,
  pdfError: false,
  formId: "",
  successMessage: "",
  requestData: {
    customerName: "customer",
    locationNumber: "2323",
    languageList: [
      {
        languageCode: "ENG",
      },
    ],
     cityName: "cityName",
     countryCode: "test",
     countryName: "test",
  };
};

const eFormReducer = (state = initialState, action) => {
    switch (action.type) {
        case types.SET_FORM_DATA:
            return {
               ...state,
                formId: action.payload,
            };
        case types.SUCCESS_SIGNED_PDF:
            return {                                
            ...state,
            pdfURL: action.payload,
            pdfLoaded: true,
            pdfError: false,
            };
        case types.ERROR_SIGNED_PDF:
            return {
            ...state,
            pdfLoaded: false,
            pdfError: true,
          };
     default:
      return state;
  }
};

export default eFormReducer;
__________________________________________________________________________ 

**actions.js**

export const SUCCESS_SIGNED_PDF = "SUCCESS_SIGNED_PDF";
export const ERROR_SIGNED_PDF = "ERROR_SIGNED_PDF";
export const SET_FORM_DATA = "SET_FORM_DATA";

export const setSignFormResponsePdfSuccess = (payload) => ({
  type: SUCCESS_SIGNED_PDF,
  payload,
});

export const setSignFormResponsePdfError = (payload) => ({
  type: ERROR_SIGNED_PDF,
  payload,
});

export const setFormData = (payload) => ({
    type: SET_FORM_DATA,
    payload,
});

_____________________________________________________________________

Customer1.js

import React, { useContext, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import * as eFormActions from "./actions";
import SendCreateFormRequestService from "services/SendCreateFormRequestService";

  const uDispatch = useDispatch();
  const eFormReducer = useSelector((state) => state.app.eFormReducer);

  const sendCreateFormRequest = async () => {
    const { data } = await SendCreateFormRequestService(
      eFormReducer.requestData
      );

    if (data?.pdf != null) {
      if (data.formId === undefined || data.pdf === undefined) {
         udispatch(eFormActions.setSignFormResponsePdfError());
        }

      console.log('3');
      const blob = base64ToBlob(data.pdf, "application/pdf");
      const pdfURL = URL.createObjectURL(blob);
      const formId = data.formId;
      uDispatch(eFormActions.setSignFormResponsePdfSuccess(pdfURL));
      uDispatch(eFormActions.setFormData(formId));
    }
  };

 
______________________________________________________
 
Component2.js


import React, { useContext, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import * as eFormActions from "./actions";

  const uDispatch = useDispatch();
  const eFormReducer = useSelector((state) => state.app.eFormReducer);
  const formId1 = useSelector(state => state.app.eFormReducer.formId);

console.log(‘formId’, formId1)

hanks

I am getting the formId value from api response. I am saving the formId value in the reducer in Customer1 Component. I am trying to read the formId value from reducer in component2. Please help why formId value is not coming from reducer. Please help why its not working. I want formId value will be available throughout the application.

0

There are 0 best solutions below