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.